4. 模板语法基础

本节目标：掌握 Svelte 模板里的文本插值、属性绑定、表达式、事件监听等基础语法。学完你能在模板里灵活展示数据和处理交互。

文本插值

在 Svelte 模板中，用大括号 {} 包裹 JavaScript 表达式，就能把值插入到文本中：

<script>
	let name = 'Svelte';
	let a = 1;
	let b = 2;
</script>

<h1>Hello {name}!</h1>
<p>{a} + {b} = {a + b}.</p>

表达式会被转换成字符串显示。如果值是 null 或 undefined，对应位置不会显示任何内容。

Note

插值的内容会被自动转义，防止 XSS 攻击。如果你想渲染原始 HTML（需要确保内容安全），后面会讲 {@html} 标签。

属性绑定

属性的值可以用大括号传 JavaScript 表达式：

<script>
	let path = 'about';
	let clickable = true;
</script>

<!-- 字符串和表达式混合 -->
<a href="page/{path}">关于我们</a>

<!-- 整个属性值是表达式 -->
<button disabled={!clickable}>点击我</button>

属性简写

当属性名和变量名相同时，可以简写成一个 {变量名}：

<script>
	let disabled = true;
	let href = 'https://svelte.dev';
</script>

<!-- 简写形式 -->
<button {disabled}>按钮</button>
<a {href}>链接</a>

<!-- 等价于 -->
<button disabled={disabled}>按钮</button>
<a href={href}>链接</a>

这个写法很实用，能减少重复代码。

布尔属性

布尔属性的规则很简单：

值为 truthy（真值）时，属性会出现在元素上
值为 falsy（假值）时，属性不会出现

<script>
	let required = true;
</script>

<!-- required 属性会出现在 input 上 -->
<input {required} placeholder="必填项" />

<!-- required 属性不会出现 -->
<input required={false} placeholder="选填项" />

Tip

除了布尔属性，其他属性只要值不是 null 或 undefined，就都会显示。值为 null 或 undefined 时属性会被移除。

事件监听

在 Svelte 5 中，事件监听直接用属性形式，以 on 开头：

<script>
	let count = $state(0);
</script>

<button onclick={() => count++}>
	点击次数：{count}
</button>

onclick 就是监听 click 事件。同理，oninput 监听 input 事件，onkeydown 监听 keydown 事件。

当变量名和属性名相同时，可以简写：

<script>
	function onclick(event) {
		console.log('点击了', event.target);
	}
</script>

<button {onclick}>点击我</button>
<!-- 等价于 <button onclick={onclick}>点击我</button> -->

Note

简写要求变量名和属性名完全一致。如果你的函数叫 handleClick，就不能简写，得写完整形式 onclick={handleClick}。

JavaScript 表达式

大括号里可以放任何合法的 JavaScript 表达式：

<script>
	let items = ['苹果', '香蕉', '橙子'];
	let show = true;
	let value = 'Hello World';
</script>

<!-- 三元运算 -->
<p>{show ? '显示中' : '已隐藏'}</p>

<!-- 数组操作 -->
<p>共有 {items.length} 个水果</p>

<!-- 方法调用 -->
<p>大写：{value.toUpperCase()}</p>

<!-- 正则表达式需要加括号 -->
<div>{(/^[A-Za-z ]+$/).test(value) ? '纯字母' : '含其他字符'}</div>

展开属性

如果你有一组属性想批量传给元素或组件，用 {...对象} 展开：

<script>
	let inputProps = {
		type: 'text',
		placeholder: '请输入',
		maxlength: 20
	};
</script>

<input {...inputProps} />

展开属性可以和普通属性混用，后面的覆盖前面的：

<!-- 如果 things.a 存在，会覆盖 a="b" -->
<!-- c="d" 会覆盖 things.c（如果存在）-->
<Widget a="b" {...things} c="d" />

注释

Svelte 模板支持标准的 HTML 注释：

<!-- 这是注释，不会显示在页面上 -->
<h1>Hello world</h1>

有两种特殊注释：

svelte-ignore：忽略下一行标记的警告（通常是无障碍警告）：

<!-- svelte-ignore a11y_autofocus -->
<input bind:value={name} autofocus />

@component：悬停在组件名上时显示的说明文档：

<!--
@component
- 这是一个示例组件
- 用法：<Main name="码上学" />
-->
<script>
	let { name } = $props();
</script>

<main>
	<h1>Hello, {name}</h1>
</main>

大括号转义

如果模板里需要显示大括号本身，用 HTML 实体编码：

<p>用 &lbrace; 和 &rbrace; 显示大括号</p>
<!-- 输出：用 { 和 } 显示大括号 -->

本节回顾

{表达式} 做文本插值，值自动转义
属性={值} 绑定属性，同名可简写为 {属性}
布尔属性：truthy 出现，falsy 不出现
onclick 等属性形式监听事件（Svelte 5 新写法）
大括号里可放任意 JavaScript 表达式
{...对象} 展开批量属性，支持混用
HTML 注释 + svelte-ignore + @component 三种特殊注释