const app = new Vue({
el: '#app',
data: {
items: [
{ id: 1, name: 'item1'},
{ id: 2, name: 'item2'},
{ id: 3, name: 'item3'}
]
},
methods: {
removeItem(id) {
this.items = this.items.filter(item =>item.id !== id)
}
}
})在Vue中更新列表元素是很常見的操作，在頁面中刪除或增加一個元素時，我們通常會需要更新列表元素，這時候Vue的動態數據綁定特性就能夠幫助我們非常便捷地實現這個功能。
在上面的代碼中，我們定義了一個包含三個對象的數組items，每一個對象包含一個id和一個name屬性。在methods中我們定義了一個方法removeItem，該方法接受一個id參數，通過filter方法過濾出不包含該id的item并重新賦值給data中的items屬性。
在Vue頁面中，我們可以使用v-for指令渲染items數組中的每一個元素。比如下面的代碼：
- {{item.name}}
通過在li元素上使用v-for指令，我們可以循環渲染items數組中的每一個元素，同時使用:key指令給每一個li元素綁定一個唯一的key，這樣Vue可以更好地進行DOM更新。
在li元素中，我們使用插值語法{{}}顯示每一個item的name屬性，同時使用一個按鈕來調用removeItem方法刪除對應的元素。
當我們點擊刪除按鈕時，Vue會自動將最新的items數組重新渲染到頁面上，從而實現了列表元素的更新操作。
除了上面展示的刪除操作，Vue還提供了很多更新列表元素的方法。比如push、pop、shift、unshift等方法可以新增或刪除數組元素；splice方法可以在指定位置插入或刪除元素；sort方法可以按照指定規則排序元素等等。這些方法的使用和JavaScript中的用法基本相同，只不過在Vue中進行了一些內部優化，讓我們不需要手動更新DOM。
總之，在Vue中更新列表元素非常方便，只需要對data中的數組進行修改，Vue會自動更新DOM，我們不需要手動操作DOM元素。這種方式提高了開發效率，減少了潛在的bug。
上一篇css 圖片不超過div
下一篇html畫皮卡丘代碼