學習要點：
1.數組檢測
2.key 問題
本節課我們來開始學習 Vue3.x 的 v-for 中的數組檢測和 key 的問題。
一．數組檢測
1. 為了更好的渲染視圖，Vue 提供了如下的變更方法，執行后可渲染視圖更新；
push()/pop()/shift()/unshift()/splice()/sort()/reverse();
PS：在控制臺輸入 app.array.push({city : '重慶'})，視圖立馬渲染更新；
2. 如果想替換掉數組的某個選項，可以如下操作：
// 替換掉第二條的內容
vm.array[1] = {city : '南京'}
PS：Vue 也提供了比如 filter()/concat()/slice()來替換并返回一個新數組；
vm.array.slice(1,4)
二．key 問題
1. 我們要創建一個按鈕，來點擊添加一個選項，具體如下：
<button v-on:click="add">添加button>
methods : {
// 在項目頂端添加一個記錄
add() {
this.array.unshift({city : '重慶'})
}
},
PS：此時在渲染端，做一個復選按鈕；
<li v-for="item in array"><input type="checkbox">{{item.city}}li>
PS：當我們單擊按鈕時，在列表頂端添加了一個選項，但復選的勾卻錯位了；
2. 此時，我們需要對每一個項目限定一個唯一的 id 指明來解決這個問題；
{
id : 1,
city : '北京'
},
add() {
this.array.unshift({id : 5, city : '重慶'})
}
// v-bind:key 來綁定 id
<li v-for="item in array" v-bind:key="item.id">
<input type="checkbox">{{item.city}}
li>
本文由:蘭州啟點網絡（
www.syzhibo.net)整理發布!
啟點CMS演示地址及賬號
