好的，我們來詳細講解 Vue 中最基礎的數據展示方式：文本插值和在其內部使用的 JavaScript 表達式。
1. 文本插值 (Text Interpolation)
知識點:
文本插值是 Vue 中最基本的數據綁定形式。它使用“Mustache”語法（雙大括號 {{ }}）將數據直接渲染到 HTML 的文本內容中。
- 核心作用: 將 Vue 實例中
setup函數返回的數據，動態地顯示在頁面的指定位置。 - 響應式: 當大括號內所依賴的數據發生變化時，插值所在的部分會自動更新，以反映最新的數據。這正是 Vue 響應式系統的核心體現。
- 純文本: 插值會將其內容作為純文本來處理，而不是 HTML。如果你想渲染 HTML，需要使用我們之前討論過的
v-html指令。
2. JavaScript 表達式 (JavaScript Expressions)
知識點:
雙大括號 {{ }} 內部不僅僅能放一個簡單的變量名，它還支持單個 JavaScript 表達式。這意味著你可以在里面進行計算、調用方法或執行簡單的邏輯判斷。
Vue 對這里的表達式有明確的限制：
- 必須是表達式 (Expression): 一個表達式是任何可以產生一個值的代碼片段。例如
user.name、count + 1、isOk ? '是' : '否'。 - 不能是語句 (Statement): 語句是執行操作但不一定返回值。例如
let a = 1、if (x > 1) { ... }、for (...)都是語句，它們在插值中是無效的。 - 訪問限制: 表達式只能訪問在
setup中返回的屬性、全局白名單內的對象（如Math、Date）和一些 Vue 內置的輔助函數。你不能訪問自己定義的全局變量。
示例代碼
下面是一個完整的 HTML 文件，演示了文本插值和各種合法的 JavaScript 表達式。
你可以將此代碼保存為 .html 文件，并在瀏覽器中打開查看效果。
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Vue 3 文本插值與表達式 (CDN)</title><style>body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; padding: 20px; font-size: 1.1rem; }#app { max-width: 700px; margin: 0 auto; padding: 25px; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); }.demo-section { padding: 15px; border: 1px solid #e0e0e0; border-radius: 5px; margin-bottom: 20px; }.demo-section h3 { margin-top: 0; color: #42b883; }code { background-color: #f0f0f0; padding: 2px 5px; border-radius: 3px; }.note { color: #d9534f; font-size: 0.9em; margin-top: 10px; }</style>
</head>
<body><div id="app"><h1>文本插值 ({{ }}) 與表達式</h1><div class="demo-section"><h3>1. 基本用法</h3><p>歡迎, {{ username }}!</p></div><div class="demo-section"><h3>2. 算術運算</h3><p>商品單價: {{ price }} 元</p><p>商品數量: {{ quantity }}</p><p>總價: <strong>{{ price * quantity }}</strong> 元</p></div><div class="demo-section"><h3>3. 訪問對象屬性</h3><p>用戶信息: {{ user.name }} ({{ user.email }})</p></div><div class="demo-section"><h3>4. 使用方法調用</h3><p>姓名倒序: <strong>{{ reverseName(user.name) }}</strong></p></div><div class="demo-section"><h3>5. 使用三元運算符</h3><p>賬戶狀態: <span :style="{ color: isActive ? 'green' : 'red' }">{{ isActive ? '已激活' : '未激活' }}</span></p></div><div class="demo-section"><h3>6. 復雜的表達式 (但保持簡潔)</h3><p>格式化消息: <code>{{ message.toUpperCase().split('').reverse().join('') }}</code></p></div><div class="demo-section"><h3>7. 無效的用法 (語句)</h3><p>下面的代碼在 Vue 模板中會報錯，這里僅作說明：</p><ul><li><code>{{ let a = 1 }}</code> (這是聲明語句)</li><li><code>{{ if (isActive) { return 'Active' } }}</code> (這是流控制語句)</li></ul><p class="note">注意：你不能在 `{{ }}` 中使用 `if/else`，但可以使用三元運算符 `( ? : )` 來實現類似的效果。</p></div></div><script src="https://unpkg.com/vue@3/dist/vue.global.js"></script><script>const { createApp, ref, reactive } = Vue;const app = createApp({setup() {// 1. 基本數據const username = ref('張三');// 2. 用于算術運算的數據const price = ref(15);const quantity = ref(3);// 3. 對象數據const user = reactive({name: '李四',email: 'lisi@example.com'});// 4. 定義一個方法const reverseName = (name) => {return name.split('').reverse().join('');};// 5. 用于三元運算符的數據const isActive = ref(true);// 6. 用于復雜表達式的數據const message = ref('Hello Vue');// 將所有需要被模板訪問的數據和方法返回return {username,price,quantity,user,reverseName,isActive,message};}});app.mount('#app');
</script></body>
</html>
總結
| 分類 | 示例 | 描述 |
|---|---|---|
| 基礎變量 | {{ myData }} | 直接顯示 setup 中返回的 myData 的值。 |
| 算術運算 | {{ count + 1 }} | 可以執行加減乘除等數學計算。 |
| 對象屬性訪問 | {{ user.name }} | 可以訪問對象的深層屬性。 |
| 方法調用 | {{ formatPrice(price) }} | 可以調用 setup 中返回的方法，并傳入參數。 |
| 三元表達式 | {{ isVisible ? '顯示' : '隱藏' }} | 是 if-else 在模板中最常見的替代方案。 |
| 其他表達式 | {{ message.split('').reverse().join('') }} | 任何能返回一個值的 JS 表達式鏈都是有效的。 |
最佳實踐：雖然模板中支持復雜的表達式，但為了保持模板的聲明性和可讀性，推薦將過于復雜的邏輯封裝在方法或計算屬性（computed property）中。這樣可以讓模板代碼更清晰、更易于維護。
