{#if} {#else if} {#else}
根据 JavaScript 表达式有条件地渲染标记。
{#if} {#else if} {#else} 是 CoddyKit 上的免费 Sveltejs Academy 课时。 这是第 1 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 Sveltejs Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Sveltejs Academy 课程共包含 4 节课。
条件块
Svelte 的条件语法类似于 Handlebars：{#if}、{:else if}、{:else}，并以 {/if} 结束。
基础示例
根据布尔表达式显示一个分支或另一个分支。
{#if loggedIn}
<p>Welcome back!</p>
{:else}
<p>Please sign in.</p>
{/if}多个分支
使用 {:else if} 链接多个条件。
{#if score > 90}
<p>A</p>
{:else if score > 75}
<p>B</p>
{:else}
<p>C</p>
{/if}表达式就是 JavaScript
条件可以是任何有效的 JavaScript 表达式。
{#if items.length > 0 && !isLoading}结束标签
请始终使用 {/if} 结束。缺少结束标签会导致编译错误。
嵌套条件块
条件块可以自由嵌套在其他 Svelte 块和 HTML 中。
{#if user}
{#if user.admin}
<Admin />
{/if}
{/if}没有 switch 语句
Svelte 没有内置的 switch 块。请使用链式 {:else if} 或计算一个变量。
与 each 块结合
您可以将列表包裹在条件块中，仅在存在项目时进行渲染。
{#if items.length}
{#each items as item}<li>{item}</li>{/each}
{/if}内部响应性
条件具有响应性：其依赖项发生变化时，Svelte 会重新求值并切换分支。
if 块中的动画
您可以将 transition: 指令添加到 if 块中的元素，为进入和离开添加动画。
空分支
您可以只使用 if 块而不提供 else。else 是可选的。
快速检查
Svelte 的 if 块如何结束？
回顾
使用 {#if}/{:else if}/{:else}/{/if} 进行条件渲染。表达式就是普通的 JS。
用 AI 导师学习 HTML — 免费
在浏览器中编写并运行真实代码，获得全天候 AI 导师的即时帮助，并在网页或应用中继续学习。
- 课程
- 41
- 课程
- 163
常见问题解答
「{#if} {#else if} {#else}」课时是免费的吗？
是的 — 「{#if} {#else if} {#else}」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Sveltejs Academy 课程的其余内容，请升级到 CoddyKit PRO。 Sveltejs Academy 课程共包含 4 节课。
「{#if} {#else if} {#else}」这节课中我会学到什么？
根据 JavaScript 表达式有条件地渲染标记。 你通过在浏览器中直接运行的动手代码来练习 Sveltejs Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 Sveltejs Academy 需要有经验吗？
无需任何先前经验。CoddyKit 上的 Sveltejs Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 1 节课，共 4 节。
「{#if} {#else if} {#else}」课时需要多长时间？
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。
我能在这节 Sveltejs Academy 课中编写并运行代码吗？
能。每节 Sveltejs Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。
此课程中的所有课时
- {#if} {#else if} {#else}
- 带索引和键的 {#each}
- 使用 {#key} 强制重新渲染
- 嵌套的 {#each} 与基于键的更新