Svelte模板语法

{#each ...}

{#each expression as name}...{/each}

{#each expression as name, index}...{/each}

可以使用 each 块迭代任何数组或类数组值，即任何具有 length 属性的对象。

<h1>Shopping list</h1>
<ul>
	{#each items as item}
		<li>{item.name} x {item.qty}</li>
	{/each}
</ul>

可以使用 each 块迭代任何数组或类数组值 - 也就是说，任何具有 length 属性的对象。

each 块还可以指定一个索引，相当于 array.map(...) 回调中的第二个参数。

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

带键的 each 块

{#each expression as name (key)}...{/each}

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

如果提供了键表达式 - 它必须唯一地标识每个列表项 - Svelte 将使用它在数据更改时对列表进行差异比较，而不是在末尾添加或删除项。键可以是任何对象，但建议使用字符串和数字，因为它们允许在对象本身更改时保持标识。

{#each items as item (item.id)}
	<li>{item.name} x {item.qty}</li>
{/each}

<!-- or with additional index value -->
{#each items as item, i (item.id)}
	<li>{i + 1}: {item.name} x {item.qty}</li>
{/each}

可以在 each 块中自由使用解构和剩余模式。

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

{#each objects as { id, ...rest }}
	<li><span>{id}</span><MyComponent {...rest} /></li>
{/each}

{#each items as [id, ...rest]}
	<li><span>{id}</span><MyComponent values={rest} /></li>
{/each}

没有项目的 each 块

{#each expression}...{/each}

{#each expression, index}...{/each}

如果您只想渲染 n 次内容，可以省略 as 部分 (演示)

<div class="chess-board">
	{#each { length: 8 }, rank}
		{#each { length: 8 }, file}
			<div class:black={(rank + file) % 2 === 1}></div>
		{/each}
	{/each}
</div>

else 块

{#each expression as name}...{:else}...{/each}

each 块还可以包含一个 {:else} 子句，如果列表为空则渲染该子句。

{#each todos as todo}
	<p>{todo.text}</p>
{:else}
	<p>No tasks today!</p>
{/each}

在 GitHub 上编辑此页面

{#if ...} {#key ...}