在 Vue.js 中，插值表达式是用于在模板中显示数据的一种方式。它使用双大括号语法 {{ }} 来包裹需要输出的变量或表达式的值。Vue 会自动将这些表达式的值插入到 HTML 文档中相应的位置。

插值表达式

基本用法

最基本的插值表达式形式就是直接在模板中引用 Vue 实例中的数据属性：

<div id="app">{{ message }}
</div>

对应的 JavaScript 代码

new Vue({el: '#app',data: {message: 'Hello Vue!'}
});

当这个 Vue 实例被创建时，{{ message }} 将会被替换为 'Hello Vue!'。

表达式支持

在插值表达式中，你不仅可以绑定简单的数据属性，还可以使用更为复杂的 JavaScript 表达式：

三元运算符：
```
{{ isOk ? 'Yes' : 'No' }}
```
简单算术运算：
```
{{ number + 1 }}
```
方法调用

<div id="app"><!-- 调用 reverseMessage 方法 --><p>原始消息: {{ message }}</p><p>反转后的消息: {{ reverseMessage() }}</p>
</div><script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<script>
new Vue({el: '#app',data: {message: 'Hello Vue!'},methods: {reverseMessage: function () {return this.message.split('').reverse().join('');}}
});
</script>

插值表达式支持 JavaScript 的全局对象和函数

//字符串方法
<p>{{ message.toUpperCase() }}</p> <!-- 转大写 -->
<p>{{ message.substring(0, 5) }}</p> <!-- 截取字符串 -->
<p>{{ message.split(' ').join('-') }}</p> <!-- 分割并连接 -->// 数学函数
<p>{{ Math.round(3.14159) }}</p> <!-- 四舍五入 -->
<p>{{ Math.max(1, 3, 2) }}</p> <!-- 最大值 -->
<p>{{ Math.min(1, 3, 2) }}</p> <!-- 最小值 -->//数组方法
<p>{{ items.reverse().join(', ') }}</p> <!-- 反转数组并连接 -->
<p>{{ items.slice(0, 3).join(', ') }}</p> <!-- 截取数组前3项 -->
<p>{{ items.map(item => item * 2).join(', ') }}</p> <!-- 数组映射 -->// 其他全局函数
<p>{{ isNaN(value) }}</p> <!-- 检查是否为 NaN -->
<p>{{ parseFloat('3.14') + 1 }}</p> <!-- 解析浮点数 -->
<p>{{ String(123) }}</p> <!-- 转换为字符串 -->

注意事项

只能是表达式：插值中只能包含单个表达式，不能包含语句（如 if, for, var 等）。例如，以下写法是无效的：

<!-- 这不会工作 -->
<p>{{ var a = 1; a + 2 }}</p>

v-once 指令

如果你希望某个插值只渲染一次，而不随着数据的变化而更新，可以使用 v-once 指令：

<span v-once>{{ message }}</span>

这意味着即使 message 在之后发生变化，该  标签内的内容也不会随之更新。

插值表达式是 Vue.js 中非常基础且强大的功能，它使得动态地向网页中插入数据变得异常简单。通过插值表达式，你可以轻松地展示数据、执行简单的计算以及格式化输出。不过，在使用过程中也需注意其限制，比如不能包含多个表达式或者语句，同时合理利用 v-once 等指令来满足特定需求。对于更复杂的逻辑处理，建议使用计算属性或方法

表达式详解

表达式是由变量、常量、运算符、函数调用等组成的，能够被求值并产生一个结果的代码片段。

核心特征

可求值 (Evaluatable)：表达式的核心特性是它可以被“计算”或“求值”。
产生结果 (Produces a Value)：求值的结果是一个值（Value），这个值可以是数字、字符串、布尔值、对象、函数等任何数据类型。
不改变状态 (通常)：纯粹的表达式本身不会改变程序的状态（比如修改变量的值）。它们只是计算并返回一个结果。（注意：包含赋值运算符或函数调用的表达式可能会有副作用）。

表达式的类型

表达式可以非常简单，也可以非常复杂：

字面量 (Literals)：最简单的表达式，本身就是值。
- 42 (数字)
- "Hello" (字符串)
- true (布尔值)
- null, undefined
变量 (Variables)：变量名本身就是一个表达式，它的值就是变量当前存储的值。
- x (假设 x 的值是 10，那么表达式 x 的值就是 10)
算术表达式 (Arithmetic Expressions)：使用算术运算符（+, -, *, /, %, **）。
- 3 + 5 (结果是 8)
- 10 * (2 + 3) (结果是 50)
- price * taxRate
关系表达式 (Relational Expressions)：使用比较运算符（==, !=, ===, !==, <, >, <=, >=），结果通常是布尔值。
- a > b (如果 a 大于 b，结果是 true，否则是 false)
- name === "Alice"
逻辑表达式 (Logical Expressions)：使用逻辑运算符（&&, ||, !），结果通常是布尔值。
- (age >= 18) && (hasLicense) (年龄大于等于18岁且有驾照)
- !isLoggedOut (不是已登出状态)
字符串表达式 (String Expressions)：使用字符串运算符（主要是 + 用于连接）。
- "Hello, " + name
- "The price is $" + price
函数调用表达式 (Function Call Expressions)：调用一个函数，其返回值就是表达式的结果。
- Math.max(1, 2, 3) (结果是 3)
- getName() (假设函数返回一个名字字符串)
- reverseString("hello") (结果是 "olleh")
三元条件表达式 (Ternary Conditional Expression)：condition ? exprIfTrue : exprIfFalse。
- score >= 60 ? "Pass" : "Fail"
对象和数组字面量 (Object and Array Literals)：它们本身也是表达式，会产生一个对象或数组。
- { name: "Alice", age: 30 }
- [1, 2, 3, 4]

表达式 vs 语句 (Statement)

理解表达式的关键是将其与语句区分开来：

表达式 (Expression)：做什么 (What)。它关注的是“产生一个值”。
- 例子：3 + 4, x, myFunction(), "Hello" + name
语句 (Statement)：做什么事 (Do Something)。它关注的是“执行一个动作”或“控制程序流程”。
- 例子：
 - let x = 5; (变量声明语句)
 - if (x > 0) { ... } (条件语句)
 - for (let i = 0; i < 10; i++) { ... } (循环语句)
 - return x; (返回语句)
 - x = x + 1; (赋值语句 - 虽然包含表达式 x + 1，但整个 x = x + 1; 是一个语句)

重要关系：语句可以包含表达式。例如，赋值语句 x = 3 + 4; 中，3 + 4 是一个表达式，x = ... 是一个语句。

在 Vue 模板中的应用

在 Vue 的插值表达式 {{ }} 和指令的值中，你只能使用表达式，不能使用语句。

✅ 允许 (表达式)：
- {{ message.toUpperCase() }}
- {{ user.age > 18 ? 'Adult' : 'Minor' }}
- {{ items.length }}
- {{ Math.PI.toFixed(2) }}
❌ 不允许 (语句)：
- {{ if (ok) { return message } }} (if 是语句)
- {{ var a = 1; a + 2 }} (var 声明是语句)
- {{ for (let i=0; i<10; i++) { console.log(i) } }} (for 是语句)