Each blocks

  1. {#each expression as name}...{/each}
  1. {#each expression as name, index}...{/each}
  1. {#each expression as name, index (key)}...{/each}
  1. {#each expression as name}...{:else}...{/each}

可以使用each来遍历一个列表数据。

  1. <h1>Shopping list</h1>
  2. <ul>
  3.     {#each items as item}
  4.         <li>{item.name} x {item.qty}</li>
  5.     {/each}
  6. </ul>

每一个each块，都可指定index 。 index的值和array.map(...)的回调方法的第二个参数相同。

  1. {#each items as item, i}
  2.     <li>{i + 1}: {item.name} x {item.qty}</li>
  3. {/each}

如果你指定了key(必须是该列表中每一项的唯一标示)，Svelte 会在数据发生变更的时候，对列表进行 diff（而不只是在结尾添加或删除项）。 key可以是任何对象，但是推荐使用字符或数字，因为它们在对象发生变化的时候仍保持不变。

  1. {#each items as item, i (item.id)}
  2.     <li>{i + 1}: {item.name} x {item.qty}</li>
  3. {/each}

你可以在each中使用解构的语法。

  1. {#each items as { id, name, qty }, i (id)}
  2.     <li>{i + 1}: {name} x {qty}</li>
  3. {/each}

每个each也可以有一个{:else}部分，如果列表为空，则会渲染该部分的内容。

  1. {#each todos as todo}
  2.     <p>{todo.text}</p>
  3. {:else}
  4.     <p>No tasks today!</p>
  5. {/each}