{#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 ...}永久链接
{#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 块中自由使用解构和剩余模式。
{#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 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 块会销毁并重新创建其内容。
如果您希望元素在值发生变化时播放其过渡，这将非常有用。
{#key value}
<div transition:fade>{value}</div>
{/key}当在组件周围使用时，这将导致它们被重新实例化和重新初始化。
{#key value}
<Component />
{/key}