1.2.vue插值表达式

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

插值表达式

基本用法

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

复制代码

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

对应的 JavaScript 代码

复制代码

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

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

表达式支持

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

三元运算符：
复制代码
```
<p>{{ isOk ? 'Yes' : 'No' }}</p>
```
简单算术运算：
复制代码
```
<p>{{ number + 1 }}</p>
```
方法调用

原始消息: {{ message }}

反转后的消息: {{ reverseMessage() }}

<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 的全局对象和函数

//字符串方法

{{ message.toUpperCase() }}

{{ message.substring(0, 5) }}

{{ message.split(' ').join('-') }}

// 数学函数

{{ Math.round(3.14159) }}

{{ Math.max(1, 3, 2) }}

{{ Math.min(1, 3, 2) }}

//数组方法

{{ items.reverse().join(', ') }}

{{ items.slice(0, 3).join(', ') }}

{{ items.map(item => item * 2).join(', ') }}

// 其他全局函数

{{ isNaN(value) }}

{{ parseFloat('3.14') + 1 }}

{{ String(123) }}

注意事项

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

{{ var a = 1; a + 2 }}

v-once 指令

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

复制代码

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

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

插值表达式是 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 是语句)

总结

表达式是编程语言中能"计算出一个值"的代码单元。它由操作数（变量、常量、函数调用等）和运算符组成。理解表达式是编写任何程序的基础，尤其是在像 Vue 这样需要在模板中进行数据绑定和逻辑处理的框架中，掌握表达式的概念和用法至关重要。记住：表达式产生值，语句执行动作。