在前端开发中，变量和表达式的使用是构建动态用户界面的核心。Svelte 提供了一种简洁而强大的方式来处理这些元素。本章将详细介绍如何在 Svelte 中定义和使用变量以及如何利用表达式来增强你的应用程序。
1. 变量声明
在 JavaScript 中，我们通常使用 let 和 const 关键字来声明变量。Svelte 同样支持这些关键字，并且还提供了更加简洁的方式来定义和绑定变量。
使用 let 声明变量
<script>
let name = "Alice";
</script>
<p>你好，{name}!</p>在这个例子中，我们声明了一个名为 name 的变量并初始化为 "Alice"。然后在 <p> 标签内部使用大括号 {} 来插入这个变量的值。
使用 const 声明常量
如果你确定某个值不会改变，可以使用 const 关键字来声明一个常量：
<script>
const PI = 3.14159;
</script>
<p>圆周率的近似值是：{PI}</p>需要注意的是，虽然 const 确保了变量的值不可变，但对象和数组的内容仍然可以修改。
2. 动态绑定
Svelte 的核心理念之一是通过响应式声明来简化数据绑定过程。这意味着你可以直接在模板中使用变量，而无需担心手动更新 DOM。
动态文本
在模板中直接插入变量值：
<script>
let message = "欢迎来到我的网站";
</script>
<p>{message}</p>当 message 的值发生变化时，对应的 DOM 元素会自动更新。
条件渲染
根据条件显示或隐藏某些元素：
-- -------------------- ---- ------- -------- --- ---------- - ----- --------- ---- ----------- ---------- ------- ---------- -----
这里使用了 Svelte 的块语法 {#if ... :else /} 来根据 isLoggedIn 的值决定显示哪个部分。
3. 表达式
除了简单的变量插入外，Svelte 还支持复杂的表达式，这使得逻辑计算变得非常方便。
数学运算
可以在大括号中进行数学运算：
<script>
let num1 = 10;
let num2 = 5;
</script>
<p>{num1 + num2}</p> <!-- 输出 15 -->逻辑表达式
也可以使用逻辑运算符：
<script>
let age = 20;
</script>
<p>{age >= 18 ? "成年" : "未成年"}</p> <!-- 输出 "成年" -->这里使用了三元运算符 ? : 来根据年龄判断是否成年。
4. 计算属性
为了更好地组织代码，Svelte 引入了计算属性的概念，它允许你定义一个基于其他状态值计算得出的新值。
定义计算属性
使用 get 函数来定义计算属性：
-- -------------------- ---- ------- -------- ------ - -------- - ---- --------------- --- --------- - ----------------- --- -------- - ---------------- -- -------- - -------------- -------------- --------- --------------------
这里的 $: 符号表示这是一个计算属性，每当 firstName 或 lastName 发生变化时，fullName 都会被重新计算并更新。
5. 使用事件处理
事件处理是前端应用中不可或缺的一部分。Svelte 提供了简洁的方式来处理各种用户交互事件。
绑定事件处理器
<script>
function handleClick() {
alert("按钮被点击了！");
}
</script>
<button on:click={handleClick}>点击我</button>这里我们定义了一个 handleClick 函数，并通过 on:click 绑定到按钮上。
匿名函数
你也可以直接在模板中使用匿名函数：
<button on:click={() => alert("按钮被点击了！")}>点击我</button>这种方式适合简单的操作，但对于复杂逻辑建议使用命名函数。
通过以上介绍，你应该对如何在 Svelte 中使用变量、表达式以及事件处理有了全面的理解。掌握这些基本概念后，你就可以开始构建更加动态和交互式的 Web 应用了。