{#if ...}permalink
{#if expression}...{/if}{#if expression}...{:else if expression}...{/if}{#if expression}...{:else}...{/if}有条件渲染的内容可以封装在 if 块中。
英Content that is conditionally rendered can be wrapped in an if block.
{#if answer === 42}
<p>what was the question?</p>
{/if}可以使用 {:else if expression} 添加附加条件，也可以选择以 {:else} 子句结尾。
英Additional conditions can be added with {:else if expression}, optionally ending in an {:else} clause.
{#if porridge.temperature > 100}
<p>too hot!</p>
{:else if 80 > porridge.temperature}
<p>too cold!</p>
{:else}
<p>just right!</p>
{/if}（块不必封装元素，它们还可以封装元素内的文本！）
英(Blocks don't have to wrap elements, they can also wrap text within elements!)
{#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 块来迭代值列表。
英Iterating over lists of values can be done with an each block.
<h1>Shopping list</h1>
<ul>
{#each items as item}
<li>{item.name} x {item.qty}</li>
{/each}
</ul>你可以使用每个块来迭代任何数组或类似数组的值 — 即任何具有 length 属性的对象。
英You can use each blocks to iterate over any array or array-like value — that is, any object with a length property.
Each 块还可以指定一个索引，相当于 array.map(...) 回调中的第二个参数：
英An each block can also specify an index, equivalent to the second argument in an array.map(...) callback:
{#each items as item, i}
<li>{i + 1}: {item.name} x {item.qty}</li>
{/each}如果提供了关键表达式 — 必须唯一标识每个列表项 — 当数据更改时，Svelte 将使用它来比较列表，而不是在末尾添加或删除项目。 键可以是任何对象，但建议使用字符串和数字，因为它们允许在对象本身更改时保留身份。
英If a key expression is provided — which must uniquely identify each list item — Svelte will use it to diff the list when data changes, rather than adding or removing items at the end. The key can be any object, but strings and numbers are recommended since they allow identity to persist when the objects themselves change.
{#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}你可以在每个块中自由使用解构和剩余模式。
英You can freely use destructuring and rest patterns in each blocks.
{#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} 子句，如果列表为空，则渲染该子句。
英An each block can also have an {:else} clause, which is rendered if the list is empty.
{#each todos as todo}
<p>{todo.text}</p>
{:else}
<p>No tasks today!</p>
{/each}从 Svelte 4 开始，可以迭代像 Map 或 Set 这样的可迭代对象。 可迭代对象必须是有限的和静态的（它们在迭代时不应改变）。 在底层，它们在传递到渲染之前使用 Array.from 转换为数组。 如果你正在编写对性能敏感的代码，请尝试避免迭代并使用常规数组，因为它们的性能更高。
英Since Svelte 4 it is possible to iterate over iterables like Map or Set. Iterables need to be finite and static (they shouldn't change while being iterated over). Under the hood, they are transformed to an array using Array.from before being passed off to rendering. If you're writing performance-sensitive code, try to avoid iterables and use regular arrays as they are more performant.
{#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 blocks allow you to branch on the three possible states of a Promise — pending, fulfilled or rejected. In SSR mode, only the pending branch will be rendered on the server. If the provided expression is not a Promise only the fulfilled branch will be rendered, including in SSR mode.
{#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 块。
英The catch block can be omitted if you don't need to render anything when the promise rejects (or no error is possible).
{#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}如果你不关心挂起状态，你也可以省略初始块。
英If you don't care about the pending state, you can also omit the initial block.
{#await promise then value}
<p>The value is {value}</p>
{/await}同样，如果只想显示错误状态，则可以省略 then 块。
英Similarly, if you only want to show the error state, you can omit the then block.
{#await promise catch error}
<p>The error is {error}</p>
{/await}{#key ...}permalink
{#key expression}...{/key}当表达式的值发生变化时，键块会销毁并重新创建其内容。
英Key blocks destroy and recreate their contents when the value of an expression changes.
如果你希望元素在值更改时播放其转场，这非常有用。
英This is useful if you want an element to play its transition whenever a value changes.
{#key value}
<div transition:fade>{value}</div>
{/key}当在组件周围使用时，这将导致它们被重新实例化和重新初始化。
英When used around components, this will cause them to be reinstantiated and reinitialised.
{#key value}
<Component />
{/key}