Vue中v-for key的使用注意事項

一，創建頁面

<div id="app">
    <div>
        <label for="">Id
            <input type="text" v-model="id">
        </label>
        <label for="">name
            <input type="text" v-model="name">
            <input type="button" value="添加" @click="add">
        </label>
    </div>
    <p v-for="item in list">
        <input type="checkbox">
        {{item.id}}---{{item.name}}</p>
</div>

二，創建Vue實例對象，並對數組對象push新數據，注意用的是數組中push方法向隊列尾部添加元素

<script>
    var vm = new Vue({
        el: '#app',
        data: {
            id: '',
            name: '',
            list: [
                {id: 1, name: 'zs1'},
                {id: 2, name: 'zs2'}
            ]
        },
        methods: {
            add(){
                this.list.push({id: this.id, name: this.name})
            }
        }
    });
</script>

三，結果

1，當把中間兩項勾選后添加數據，被選中的兩項仍是勾選狀態

 四，當使用數組中的unshift() 方法（在開頭）向數組添加新元素，並“反向位移”舊元素：

<script>
    var vm = new Vue({
        el: '#app',
        data: {
            id: '',
            name: '',
            list: [
                {id: 1, name: 'zs1'},
                {id: 2, name: 'zs2'}
            ]
        },
        methods: {
            add(){
                this.list.unshift({id: this.id, name: this.name})
            }
        }
    });
</script>

運行結果：

1，先勾選第二條

 2，再向數組中添加數據，此時運行結果，索引為2的數據是選中狀態，但並不是剛才被選中的數據

問題點：只記錄了索引為2的數據，並沒有根據數據的唯一性記錄數據，當數據發生變化時，索引為2的數據也發生了變化

解決辦法：在組件中使用v-for循環 使用key保證數據的唯一性 讓data數據和頁面數據強制關聯起來

注意事項：

• v-for循環的時候key屬性只能使用number或string
• key在使用的時候 必須使用v-bind屬性綁定形式 指定key的值

<div id="app">
    <div>
        <label for="">Id
            <input type="text" v-model="id">
        </label>
        <label for="">name
            <input type="text" v-model="name">
            <input type="button" value="添加" @click="add">
        </label>
    </div>
    <p v-for="item in list" :key="item.id">
        <input type="checkbox">
        {{item.id}}---{{item.name}}
    </p>
</div>

結果：先選中zs2，再添加數據，zs2仍是選中狀態