Vue.js 的 {{ }} 插值語法詳細說明
更新日期： 2024 年 11 月 17 日
Vue.js 的 {{ }} 插值語法是模板中的重要功能之一，用於將數據插入到 HTML 中並動態更新畫面。
插值語法靈活且功能強大，不僅可以綁定 Vue 中的 data 屬性，還能綁定其他如 v-for 中的局部變數。
本文將深入探討 {{ }} 的使用細節及應用場景。
基本用法：綁定 data 屬性
Vue.js 的 data 是存儲應用狀態的核心物件，{{ }} 可直接綁定 data 中的屬性並動態顯示。
範例：綁定 data 中的值
<div id="app">
<p>輸入的關鍵字是：{{ inputKeyWord }}</p>
</div>const app = Vue.createApp({
data() {
return {
inputKeyWord: '',
list: []
};
}
});
app.mount('#app');說明
{{ inputKeyWord }}綁定了data中的inputKeyWord。- 當
inputKeyWord的值發生變化時，視圖會自動更新。
結果
初始狀態下，頁面顯示：
輸入的關鍵字是：當 inputKeyWord 被更新為 "Vue" 時，頁面自動更新為：
輸入的關鍵字是：Vue在 v-for 迴圈中的應用
v-for 是 Vue.js 提供的指令，用於遍歷數組或物件並動態生成 HTML 元素。
在 v-for 中，插值語法 {{ }} 可直接使用迴圈的局部變數。
範例：綁定 v-for 中的變數
假設我們要渲染一個待辦事項列表，數據存儲在 list 中：
<ul id="app">
<li class="todo-item" v-for="(item, index) in list">
<span class="item">{{ item }}</span>
<span class="index">（編號：{{ index }}）</span>
<button class="closeBtn">X</button>
</li>
</ul>const app = Vue.createApp({
data() {
return {
list: ['學習 Vue.js', '完成專案', '閱讀技術書籍']
};
}
});
app.mount('#app');說明
item與index的來源：v-for="(item, index) in list"定義了兩個局部變數：item：表示list中的當前項目。index：表示當前項目的索引值。
- 插值語法的應用：
{{ item }}顯示當前項目的內容。{{ index }}顯示當前項目的索引值。
結果
渲染的 HTML 結構如下：
<ul id="app">
<li class="todo-item">
<span class="item">學習 Vue.js</span>
<span class="index">（編號：0）</span>
<button class="closeBtn">X</button>
</li>
<li class="todo-item">
<span class="item">完成專案</span>
<span class="index">（編號：1）</span>
<button class="closeBtn">X</button>
</li>
<li class="todo-item">
<span class="item">閱讀技術書籍</span>
<span class="index">（編號：2）</span>
<button class="closeBtn">X</button>
</li>
</ul>插值語法的靈活應用
直接使用表達式
{{ }} 可以綁定不帶副作用的 JavaScript 表達式。例如：
<p>列表長度：{{ list.length }}</p>結果
若 list = ['學習 Vue.js', '完成專案']，則顯示：
列表長度：2與條件指令結合
可以與 v-if 等指令配合，動態渲染數據。例如：
<p v-if="list.length > 0">您有 {{ list.length }} 項待辦事項。</p>
<p v-else>目前沒有待辦事項。</p>小結
Vue.js 的插值語法 {{ }} 是數據綁定的核心工具，既可以綁定 data 中的值，也可以用於綁定 v-for 迴圈中的局部變數。
透過靈活的應用，{{ }} 幫助開發者將 JavaScript 數據與 HTML 視圖無縫結合，實現高效、動態的用戶界面。
結語
掌握 {{ }} 的使用方式是學習 Vue.js 的基礎，了解它如何與 data 和指令（如 v-for）結合使用，能讓您更自如地構建動態應用。
隨著對 Vue.js 的深入理解，您還可以結合其他指令或屬性實現更複雜的功能，進一步提升開發效率和用戶體驗。