模板语法

Svelte 的模板基于 HTML，扩展了插值、条件、列表、绑定等语法。本章速览最常用的模板特性。

文本插值 {}

用花括号插入表达式：

<script>
  let name = $state('Svelte');
  let version = $state(5);
</script>

<p>你好 {name}，当前大版本 {version}</p>
<p>计算：{version * 2}</p>
<p>大写：{name.toUpperCase()}</p>

插值里可以是任意合法的 JavaScript 表达式。

HTML 内容 {@html}

默认情况下插值会被转义。要渲染原始 HTML，用 {@html}：

<script>
  let html = $state('<em>斜体</em>');
</script>

<!-- 显示字面量 <em>斜体</em> -->
<p>{html}</p>

<!-- 渲染成真正的斜体 -->
<p>{@html html}</p>

安全提醒

不要对用户输入使用 {@html}，可能导致 XSS 攻击。仅用于可信内容。

属性绑定

普通属性

<img src={imageUrl} alt={description} />
<button disabled={!canSubmit}>提交</button>

布尔属性可直接写属性名（值为 true）：

<button disabled>禁用</button>

展开属性

用一个对象一次性设置多个属性：

<script>
  let props = $state({ type: 'text', placeholder: '请输入', name: 'field' });
</script>

<input {...props} />

双向绑定 bind:

绑定表单元素

<script>
  let text = $state('');
  let checked = $state(false);
</script>

<input bind:value={text} />
<label>
  <input type="checkbox" bind:checked={checked} /> 同意
</label>

<p>输入了：{text}，勾选：{checked}</p>

绑定内联样式

<script>
  let color = $state('#ff3e00');
  let size = $state(16);
</script>

<p style:color style:font-size="{size}px">彩色文字</p>
<input type="color" bind:value={color} />

style:属性名={值} 直接设置单个内联样式。

条件渲染 {#if}

<script>
  let score = $state(85);
</script>

{#if score >= 90}
  <p>优秀</p>
{:else if score >= 60}
  <p>及格</p>
{:else}
  <p>不及格</p>
{/if}

列表渲染 {#each}

<script>
  let items = $state(['苹果', '香蕉', '橙子']);
</script>

<ul>
  {#each items as item, index (item)}
    <li>{index}: {item}</li>
  {/each}
</ul>

• as item, index —— 拿到元素和索引
• (item) —— key，用于高效更新列表（强烈建议提供唯一 key）

带空状态的 {#each}：

{#each items as item}
  <li>{item}</li>
{:else}
  <li>列表为空</li>
{/each}

异步内容 {#await}

<script>
  let promise = $state(fetchData());
</script>

{#await promise}
  <p>加载中…</p>
{:then data}
  <p>拿到数据：{data}</p>
{:catch error}
  <p>出错了：{error.message}</p>
{/await}

关键块 {#key}

当某个值变化时，强制重新创建其内部内容：

{#key currentId}
  <div>currentId 变化时，这里会重建（可用于重播动画）</div>
{/key}

试一试

下面的组件综合用到了 {#each}、{:else}、style:width、bind:value 等模板语法 —— 就是那个待办清单：

待办清单 · 综合实战Svelte 5 · Live

小结

语法	作用
{expr}	插值（自动转义）
{@html expr}	渲染原始 HTML（慎用）
attr={v} / {...obj}	属性 / 展开属性
bind:value	双向绑定表单
style:prop={v}	内联样式
{#if} / {:else if}	条件渲染
{#each ... as x (key)}	列表渲染
{#await}	异步渲染
{#key}	值变化时重建

下一步：Snippets 与 Slots —— 更强大的内容分发。