svelte:更改 html 块内的变量值

<script>
    let count=0;
</script>

{#each list as item, i}
    <div class="item">
        <Item  />
    </div>
{/each}

如何在 svelte 中的每个块内增加某些条件下的计数?

stack overflow svelte : change variable value inside html block
原文答案

答案:

作者头像

如果您需要增加实际的 count 变量,您可以在 <script> 标签中定义的回调中这样做:

<script>
    let count = 0;
    const increment = () => count++;
</script>

{#each list as item, i}
    <div class="item">
        <!-- Use increment() somewhere in here -->
        <Item />
    </div>
{/each}

如果您需要做的只是在不改变原始变量的情况下向 count 添加一些量,您可以在大括号内这样说:

<script>
    let count = 0;
</script>

{#each list as item, i}
    <div class="item">
        {count + i}
        <Item />
    </div>
{/each}
作者头像

我怀疑您希望它在组件重新渲染时重置并且不保持当前状态,因此我将扩展 Isaac Corbrey 的答案。

<script>
    let count = 0;
    const reset = () => {count = 0; return "";}
    const increment = () => {count++; return count;}
</script>
{reset()}
{#each list as item, i}
    <div class="item">
        <Item count={increment()} />
    </div>
{/each}

由于函数 reset 在组件重新渲染时在执行过程中只返回一个空字符串,因此它只是将计数重置为默认初始值,然后 increment 返回当前值并可用于将其传递给子-零件。

作者头像

您可以只在括号内使用 JS,例如 {JAM=} 或 {JAM=}。或者在循环中,您可以使用像 {count + i} 这样的条件语句。你是这个意思吗?

作者头像

我通过在 HTML 中调用一个 setter 函数来解决这个问题,如下所示:

<script>
    let count=0;
    let incrementCount = () => {
      count++;
      return ""; //return empty string, so `undefined` isn't returned and in turn rendered in HTML
    }
</script>

{#each list as item, i}
    <div class="item">
        <Item  />
        {incrementCount()}
    </div>
{/each}

编辑: repl