Svelte模板语法

{#each ...}

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

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

遍历值可以通过 each 块来完成。这些值可以是数组、类数组对象（即任何具有 length 属性的对象），或者可迭代对象如 Map 和 Set —— 换句话说，任何可以用 Array.from 处理的对象都可以。

<h1>购物清单</h1>
<ul>
	{#each items as item}
		<li>{item.name} x {item.qty}</li>
	{/each}
</ul>

each 块还可以指定一个 index，相当于 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}

如果提供了一个 key 表达式（必须能唯一标识每个列表项），当数据发生变化时，Svelte 将使用它对列表进行差异比较，而不是在末尾添加或删除条目。key 可以是任何对象，但建议使用字符串和数字，因为它们允许在对象本身发生变化时保持标识继续存在。

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

<!-- 或带有额外的索引值 -->
{#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 部分（demo）：

<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>今天没有任务！</p>
{/each}

在 GitHub 编辑此页面

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