12. 条件渲染 {#if}

基本语法

Svelte 用 {#if} 块来做条件渲染，和大多数模板语言类似：

<script>
	let answer = 42;
</script>

{#if answer === 42}
	<p>答案正确！</p>
{/if}

{#if} 后面跟一个表达式，表达式为真时渲染内容，为假时不渲染。

if / else if / else

完整的条件分支结构：

<script>
	let temperature = $state(75);

	function setTemp(t) {
		temperature = t;
	}
</script>

{#if temperature > 100}
	<p>太热了！</p>
{:else if 80 < temperature}
	<p>有点热。</p>
{:else if 60 < temperature}
	<p>温度刚好。</p>
{:else}
	<p>太冷了！</p>
{/if}

<input type="range" min="0" max="150" bind:value={temperature} />

语法结构一览：

标签	作用	出现次数
{#if 表达式}	开始条件块，第一个条件	1 次
{:else if 表达式}	额外条件分支	0 次或多次
{:else}	以上都不满足时的兜底	0 次或 1 次
{/if}	结束条件块	1 次

表达式条件

{#if} 里的表达式可以是任何 JavaScript 表达式：

<script>
	let user = $state({ name: '码上学', isLoggedIn: true, role: 'admin' });
	let items = $state([1, 2, 3]);
</script>

<!-- 比较运算 -->
{#if items.length > 0}
	<p>有 {items.length} 个项目</p>
{/if}

<!-- 逻辑运算 -->
{#if user.isLoggedIn && user.role === 'admin'}
	<p>管理员面板</p>
{/if}

<!-- 取反 -->
{#if !user.isLoggedIn}
	<p>请先登录</p>
{/if}

<!-- 方法调用 -->
{#if items.includes(2)}
	<p>包含数字 2</p>
{/if}

嵌套条件

{#if} 可以嵌套使用：

<script>
	let user = $state({ isLoggedIn: true, role: 'editor', posts: 5 });
</script>

{#if user.isLoggedIn}
	{#if user.role === 'admin'}
		<p>管理员可以管理一切</p>
	{:else if user.role === 'editor'}
		<p>编辑可以发布文章</p>
		{#if user.posts > 0}
			<p>已发布 {user.posts} 篇文章</p>
		{/if}
	{:else}
		<p>普通用户</p>
	{/if}
{:else}
	<p>请登录</p>
{/if}

条件渲染不限于元素

{#if} 块的内容不一定要是 HTML 元素，也可以是纯文本：

<p>
	温度{temperature}度，
	{#if temperature > 100}
		太热了
	{:else if temperature > 60}
		刚好
	{:else}
		太冷了
	{/if}
</p>

与三元运算符对比

简单的文本切换，可以用三元运算符代替 {#if}，写起来更简洁：

<!-- 用 {#if} -->
{#if count === 0}
	<p>没有</p>
{:else if count === 1}
	<p>1 项</p>
{:else}
	<p>{count} 项</p>
{/if}

<!-- 同样的效果，三元运算符一行搞定 -->
<p>{count === 0 ? '没有' : count === 1 ? '1 项' : `${count} 项`}</p>

场景	推荐方式
简单文本切换	三元运算符
需要多行标记/组件	{#if} 块
多分支（3 个以上）	{#if} 块
只在真值时显示	{#if} 块（无 else）

本节回顾

• {#if 表达式} 开始条件块，{/if} 结束
• {:else if 表达式} 添加分支，{:else} 兜底
• 表达式可以是任意 JavaScript 表达式（比较、逻辑、方法调用等）
• 支持嵌套，但建议不超过三层
• 条件内容可以是元素，也可以是纯文本
• 简单切换用三元运算符，复杂逻辑用 {#if} 块