邏輯區塊

在 GitHub 上編輯此頁面

{#if ...}永久連結

{#if expression}...{/if}

{#if expression}...{:else if expression}...{/if}

{#if expression}...{:else}...{/if}

可以將有條件呈現的內容包在 if 區塊中。

{#if answer === 42}
	<p>what was the question?</p>
{/if}

使用 {:else if expression} 可以新增其他條件，並選擇以 {:else} 子句結尾。

{#if porridge.temperature > 100}
	<p>too hot!</p>
{:else if 80 > porridge.temperature}
	<p>too cold!</p>
{:else}
	<p>just right!</p>
{/if}

（區塊不必包覆元素，它們也可以包覆元素內的文字！）

{#each ...}permalink

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

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

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

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

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

可以使用 each 區塊來迭代值清單。

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

如果提供了金鑰表示式，它必須唯一識別每個清單項目，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 區塊中自由使用解構和 rest 模式。

{#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 區塊也可以有一個 {:else} 子句，如果清單為空，就會呈現該子句。

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

自 Svelte 4 起，可以迭代 Map 或 Set 等可迭代物件。可迭代物件必須是有限且靜態的（在迭代時不應變更）。在幕後，它們會使用 Array.from 轉換為陣列，然後傳遞給呈現。如果您正在撰寫效能敏感的程式碼，請盡量避免使用可迭代物件，並使用常規陣列，因為它們的效能較佳。

{#await ...}permalink

{#await expression}...{:then name}...{:catch name}...{/await}

{#await expression}...{:then name}...{/await}

{#await expression then name}...{/await}

{#await expression catch name}...{/await}

Await 區塊允許您根據 Promise 的三種可能狀態（待處理、已完成或已拒絕）進行分支。在 SSR 模式中，只有待處理分支會在伺服器上呈現。如果提供的表示式不是 Promise，則只會呈現已完成分支，包括在 SSR 模式中。

{#await promise}
	<!-- promise is pending -->
	<p>waiting for the promise to resolve...</p>
{:then value}
	<!-- promise was fulfilled or not a Promise -->
	<p>The value is {value}</p>
{:catch error}
	<!-- promise was rejected -->
	<p>Something went wrong: {error.message}</p>
{/await}

如果 Promise 拒絕（或沒有可能發生錯誤）時不需要呈現任何內容，則可以省略 catch 區塊。

{#await promise}
	<!-- promise is pending -->
	<p>waiting for the promise to resolve...</p>
{:then value}
	<!-- promise was fulfilled -->
	<p>The value is {value}</p>
{/await}

如果您不關心處理中狀態，也可以省略初始區塊。

{#await promise then value}
	<p>The value is {value}</p>
{/await}

同樣地，如果您只想顯示錯誤狀態，則可以省略 then 區塊。

{#await promise catch error}
	<p>The error is {error}</p>
{/await}

{#key ...}永久連結

{#key expression}...{/key}

當表達式的值變更時，關鍵區塊會銷毀並重新建立其內容。

如果您希望元素在值變更時播放其轉場，這會很有用。

{#key value}
	<div transition:fade>{value}</div>
{/key}

當在組件周圍使用時，這將導致它們被重新實例化和重新初始化。

{#key value}
	<Component />
{/key}