Svelte Each 块
如果你遇到需要遍历的数据列表,请使用 each 块:<ul>
{#each cats as cat}
<li><a target="_blank" href="https://www.youtube.com/watch?v={cat.id}" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" >
{cat.name}
</a></li>
{/each}
</ul>表达式 cats是一个数组,遇到数组或类似于数组的对象 (即具有length 属性)。你都可以通过 each [...iterable]遍历迭代该对象。你也可以将index 作为第二个参数(key),类似于:{#each cats as cat, i}
<li><a target="_blank" href="https://www.youtube.com/watch?v={cat.id}" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" >
{i + 1}: {cat.name}
</a></li>
{/each}如果你希望代码更加健壮,你可以使用each cats as { id, name }来解构,用cat.id 和 cat.name 来代替 id 和 name。