在 web 開發中，添加和刪除的操作是十分常見的。Vue 作為一款流行的前端框架，提供了許多便捷的方法來實現這些操作。本文將介紹如何使用 Vue 來實現添加刪除功能。 首先，假設我們有一個列表，需要在其中添加和刪除對象。我們可以通過定義一個列表數組來實現： ```html

<div id="app">
<ul>
<li v-for="item in itemList" :key="item.id">
{{item.name}} <button @click="deleteItem(item.id)">刪除</button>
</li>
</ul>
<div>
<input v-model="newItem" type="text">
<button @click="addItem">添加</button>
</div>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
itemList: [
{ id: 1, name: 'item 1' },
{ id: 2, name: 'item 2' },
{ id: 3, name: 'item 3' }
],
newItem: ''
},
methods: {
addItem: function () {
var newItem = this.newItem.trim()
if (newItem) {
this.itemList.push({
id: this.itemList.length + 1,
name: newItem
})
this.newItem = ''
}
},
deleteItem: function (id) {
this.itemList = this.itemList.filter(function (item) {
return item.id !== id
})
}
}
})
</script>

在上面的代碼中，我們定義了一個 `itemList` 數組，其中存放了一些對象。在頁面中，我們使用了 `v-for` 指令來遍歷這個數組，并顯示每個對象的名稱。同時，我們在每個對象后面加了一個按鈕，用來刪除這個對象。 我們還定義了一個輸入框和一個按鈕，用來添加新對象。當用戶點擊添加按鈕時，我們通過 `addItem` 方法來將新對象添加到列表中。這個方法將會根據輸入框中的內容，創建一個新的對象，并添加到列表末尾。同時，它會清空輸入框，以便用戶可以輸入下一個對象。 當用戶點擊刪除按鈕時，我們通過 `deleteItem` 方法來從列表中刪除對象。這個方法會根據傳入的對象 ID，使用 JavaScript 數組的 `filter` 方法來篩選出所有不同于這個 ID 的對象，然后重新賦值給 `itemList` 數組。這樣，被刪除的對象就從列表中消失了。 總之，使用 Vue 實現添加刪除是非常簡單的。通過定義一個列表數組，以及相應的添加和刪除方法，我們就可以創建一個可以動態增刪元素的頁面了。