學習要點:
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)整理發布!