Svelte模板語法

{#each ...}

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

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

可以使用 each 區塊迭代值。相關的值可以是陣列、類陣列物件（即任何具有 length 屬性的物件）或可迭代的物件，如 Map 和 Set — 換句話說，任何可以使用 Array.from 的物件。

<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 ...}