逻辑块

{#if …}

{#if 表达式}...{/if}

{#if 表达式}...{:else if 表达式}...{/if}

{#if 表达式}...{:else}...{/if}

条件性渲染的内容可以被包裹在 if 块中。

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

可以使用 {:else if 表达式} 添加额外的条件，可选地以 {: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 …}

{#each 表达式 as 名称}...{/each}

{#each 表达式 as 名称, 索引}...{/each}

{#each 表达式 as 名称 (键)}...{/each}

{#each 表达式 as 名称, 索引 (键)}...{/each}

{#each 表达式 as 名称}...{: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}
<!-- 或者带有附加索引值 -->
{#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 块也可以有一个 {:else} 子句，如果列表为空，则会渲染。

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

从 Svelte 4 开始，可以迭代像 Map 或 Set 这样的可迭代对象。可迭代对象需要是有限的和静态的（在迭代时不应该改变）。在内部，它们在使用 Array.from 转换为数组之前被传递给渲染。如果你正在编写性能敏感的代码，尽量避免使用可迭代对象，使用常规数组，因为它们性能更好。

{#await …}

{#await 表达式}...{:then 名称}...{:catch 名称}...{/await}

{#await 表达式}...{:then 名称}...{/await}

{#await 表达式 then 名称}...{/await}

{#await 表达式 catch 名称}...{/await}

Await 块允许你根据 Promise 可能的三种状态 —— 等待中、已成功或已拒绝 —— 进行分支处理。在 SSR 模式下，只有在服务器上才会渲染等待中的分支。如果提供的表达式不是 Promise，只有已成功分支将被渲染，包括在 SSR 模式下。

{#await promise}
    <!-- 承诺正在等待中 -->
    <p>waiting for the promise to resolve...</p>
{:then value}
    <!-- 承诺已成功或不是一个 Promise -->
    <p>The value is {value}</p>
{:catch error}
    <!-- 承诺已被拒绝 -->
    <p>Something went wrong: {error.message}</p>
{/await}

如果你在 Promise 拒绝时不需要渲染任何内容（或者不可能发生错误），可以省略 catch 块。

{#await promise}
    <!-- 承诺正在等待中 -->
    <p>waiting for the promise to resolve...</p>
{:then value}
    <!-- 承诺已成功 -->
    <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 表达式}...{/key}

Key 块在表达式的值更改时销毁并重新创建它们的内容。

如果你希望元素在值更改时播放其过渡效果，这非常有用。

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

当用于组件周围时，这将导致它们被重新实例化和重新初始化。

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