Vue.js 中的 HTML 變數傳遞與使用範圍
更新日期： 2024 年 11 月 17 日
在傳統的 HTML 中，變數和邏輯通常是在 JavaScript 中定義和處理的，HTML 本身並沒有能力「宣告變數」。
然而，在 Vue.js 的模板中，我們可以通過指令（如 v-for）直接宣告變數，並將其傳遞到 Vue 的方法中，實現數據的雙向互動。
這讓 HTML 不再是靜態的，變得更加「聰明」。
本文將透過實例逐步解釋 Vue 模板中的變數傳遞原理，並解答變數的使用範圍。
範例：待辦事項列表
假設我們有一個待辦事項列表，數據存儲在 Vue 的 list 陣列中，當用戶點擊按鈕時，可以刪除指定的項目。
HTML 模板
<ul class="todo-list">
<li class="todo-item" v-for="(item, index) in list" :key="index">
<span class="item">{{ item }}</span>
<button class="closeBtn" v-on:click="removeItem(index)">X</button>
</li>
</ul>JavaScript 邏輯
const app = Vue.createApp({
data() {
return {
list: ['學習 Vue.js', '完成專案', '閱讀技術書籍']
};
},
methods: {
removeItem(index) {
this.list.splice(index, 1);
}
}
});
app.mount('#app');結果
網頁初始顯示：
1. 學習 Vue.js [X]
2. 完成專案 [X]
3. 閱讀技術書籍 [X]當點擊第二項「完成專案」的按鈕時，該項目從列表中被刪除，頁面自動更新為：
1. 學習 Vue.js [X]
2. 閱讀技術書籍 [X]原理解析：HTML 如何傳遞變數到 Vue 方法？
v-for 指令的作用
v-for 是 Vue.js 的一個指令，用於遍歷數組或物件。
在遍歷時，它會自動生成局部變數，這些變數只在當前的 v-for 範圍內有效。
以上範例中：
item：表示list陣列中的每個項目（如「學習 Vue.js」）。index：表示當前項目的索引（如第 0 項、第 1 項）。
這些變數可以直接在 li 標籤中使用，也可以在子元素中（如 span 和 button）使用。
變數如何傳遞到方法？
在 v-on:click="removeItem(index)" 中：
removeItem方法：這是一個 Vue 方法，用於執行點擊事件的邏輯。index作為參數：當按鈕被點擊時，Vue 會自動將當前的index傳遞給方法removeItem。
這裡的index是v-for宣告的局部變數，代表該項目的索引。- 執行方法：
removeItem方法接收到index後，使用this.list.splice(index, 1)刪除對應的項目。
HTML 中變數的使用範圍
問題：v-for 宣告的變數可以在哪裡使用？
局部作用域
在 v-for 中宣告的變數（如 item 和 index）只在當前的元素及其子元素中有效。
也就是說，它們只能在該 li 標籤內使用。
例如：
<ul class="todo-list">
<li v-for="(item, index) in list">
<span>{{ item }}</span> <!-- 有效 -->
<button @click="removeItem(index)">X</button> <!-- 有效 -->
</li>
</ul>2. 不能跨層使用
如果嘗試在 v-for 範圍外使用變數，會出現錯誤。例如：
<ul v-for="(item, index) in list">
<li>{{ item }}</li>
</ul>
<p>{{ item }}</p> <!-- 錯誤：item 未定義 -->在這裡，item 是 v-for 的局部變數，只在 ul 和其子元素內有效，無法在範圍之外使用。
小結：HTML 中的變數與 JavaScript 的結合
在 Vue.js 中，HTML 模板通過指令如 v-for，擁有了類似 JavaScript 的變數功能：
- 動態生成變數：在
v-for中宣告的變數（如item和index）是動態生成的，並綁定到 JavaScript 數據。 - 作用域明確：這些變數的作用域僅限於當前元素及其子元素，不能跨層或全域使用。
- 與方法交互：變數可以作為參數傳遞給 Vue 的方法，實現 HTML 和 JavaScript 的無縫交互。
實用技巧與注意事項
- 多參數傳遞
如果需要同時傳遞多個參數，可以這樣做：
<button @click="removeItem(item, index)">X</button> methods: {
removeItem(item, index) {
console.log(`刪除項目：${item}, 索引：${index}`);
this.list.splice(index, 1);
}
}- 動態綁定其他屬性
在v-for變數中，可以動態生成屬性值：
<li v-for="(item, index) in list" :key="index" :class="{ completed: index % 2 === 0 }">
{{ item }}
</li>上例中，索引值為偶數的項目會添加 completed 樣式。
結語
Vue.js 的模板語法讓 HTML 模板不再只是靜態標記，而成為動態邏輯的一部分。
透過指令如 v-for，我們可以在模板中宣告變數，並將其作為參數傳遞給方法，實現數據驅動的開發模式。
理解變數的作用域與使用範圍，是高效使用 Vue 的基礎。
希望本文能幫助您更好地掌握 Vue 的模板變數特性，打造更靈活的應用。