Svelte Each 块

如果你遇到需要遍历的数据列表，请使用 ​each​ 块：

<ul>
	{#each cats as cat}
		<li><a target="_blank" href="https://link.w3cschool.cn/?target=https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3D%7Bcat.id%7D" 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://link.w3cschool.cn/?target=https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3D%7Bcat.id%7D" rel="external nofollow" target="_blank" >
		{i + 1}: {cat.name}
	</a></li>
{/each}

如果你希望代码更加健壮，你可以使用each cats as { id, name }来解构，用cat.id 和 cat.name 来代替 id 和 name。