v-for

为什么建议绑定key，主要是为了Vue的虚拟DOM比较新、旧节点的算法更高效

见 vuejs官方api

不绑定key有什么影响？

勾选李四，在输入框输入任何内容，如：马六，点击添加，李四的选中状态会转移到张三上

增加 :key="item.id" 绑定后（见注释区块），再次重试上面的操作，李四的勾选状况正常

:key="item.id" 是 v-bind:key="item.id" 的缩写形式

<div id="app">
    <div>
        <input type="text" v-model="name">
        <button @click="add">添加</button>
    </div>
    <ul>
        <li v-for="item in list">
        <!-- <li v-for="item in list" :key="item.id"> -->
            <input type="checkbox"> 
        </li>
    </ul>
</div>

<script>
    var vm = new Vue({
        el: '#app',
        data: {
            name: '',
            newId: 3,
            list: [{id: 1,name: '张三'},{id: 2,name: '李四'},{id: 3,name: '王五'}]
        },
        methods: {
            add() {
                this.list.unshift({id: ++this.newId,name: this.name})
                this.name = ''
            }
        }
    });
</script>