vue框架v-for中key的作用及使用

代码块
html代码

<div>
            <label>Id
                        <input type="text" v-model="id">
                </label>
            <label>Name
                        <input type="text" v-model="name">
               </label>
            <label>
                    <input type="button" value="添加" @click="click">
            </label>
</div>

vue代码

  var vm = new Vue({
            el: "#app",
            data: {
                id: '',
                name: '',
                list3: [{
                    id: 1,
                    name: '嬴政'
                }, {
                    id: 2,
                    name: '赵高'
                }, {
                    id: 3,
                    name: '李斯'
                }]
            },
            methods: {
                click() {
                    this.list3.unshift({
                        id: this.id,
                        name: this.name
                    })
                }
            }
        })

绑定与未绑定key的代码区别

<!-- 这是绑定的 -->
 <p v-for="item in list3" v-bind:key="item.id">
     <input type="checkbox"> {{item.id}}----{{item.name}}
 </p>        

<!-- 这是未绑定的 -->
 <p v-for="item in list3">
     <input type="checkbox"> {{item.id}}----{{item.name}}
 </p>     

实际操作
未点击添加状态

未使用key的结果

使用key的结果

解释说明
1、unshift()是在数组头部插入数据，两组都在数组中插入了。
2、但是前面的复选框发生了改变，未使用key的由3变成了2。
3、这是由于浏览器只记住了索引为3的复选框打钩，当头部插入数据后，原索引2就变为了3.。
4、当使用key后,每一组数据都有唯一的标识，就不会搞错了。
key使用时注意事项
使用key必须绑定 v-bind，且里面的数据，必须为数值类型或字符串类型。