當在組件中使用 v-for 時，key 現在是必須的。
首先，為了方便演示。我們先搭建一個基礎結構
現在我們目前添加的是用的 push 方法，添加到了對象的尾部
在添加之前選中了第五個后再添加也不會出現上面異常
接下來我們再來看看如果是使用 unshift 方法，是添加到對象前面的
我們可以看到如果在添加之前選中了其中一項，后再添加就會出現索引錯位的現象
所以我們需要給對象里面的每一項都綁定上一個唯一的標識
這個時候就可以用到我們的這個 key 了
綁定好之后我們再來看一下
現在可以看到我們沒有添加新用戶之前，我們選中了 5號，添加之后選中的還是 5號
附上完整代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<div>
<label>Id:
<input type="text" v-model='id'>
</label>
<label>Name:
<input type="text" v-model='name'>
</label>
<input type="button" value="添加" @click='add'>
</div>
<p v-for='item in list' v-bind:key='item.id'>
<input type="checkbox">{{ item.id }} --- {{ item.name }}
</p>
</div>
<script src="../vue/vue.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
id: '',
name: '',
list: [{
id: 1,
name: '勒布朗'
}, {
id: 2,
name: '杜蘭特'
}, {
id: 3,
name: '庫里'
}, {
id: 4,
name: '羅斯'
}, {
id: 5,
name: '喬治'
}]
},
methods: {
add(){
this.list.unshift({id: this.id, name: this.name})
}
}
})
</script>
</body>
</html>