在 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>- 方法調用
<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 在之后發生變化，該 <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 這樣需要在模板中進行數據綁定和邏輯處理的框架中，掌握表達式的概念和用法至關重要。記住：表達式產生值，語句執行動作。
