vue学习(十一) v-for使用的注意事项：2.2.0+之后的版本里，当在组件中使用v-for时，key是必须的，它是用来表示唯一身份的

//html
<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>　　//注意v-for循环的时候， key属性只能使用string或者number　　//注意key在使用的时候 必须使用v-bind 属性绑定的形式，指定key的值　　<p v-for="item in list" v-bind:key="item.id">　　　　<input type="checkbox"/>{{item.id}}---　　　　{{item.name}}　　</p>
</div>

//script
<script>
　　var vm = new Vue({
　　　　el:‘app‘,
　　　　data:{　　　　　　id:‘‘,　　　　　　name:‘‘,
　　　　　　list:[　　　　　　　　{id:1, name:‘韩非‘}，　　　　　　　　{id:2, name:‘魏庄‘}，　　　　　　　　{id:3, name:‘张良‘},　　　　　　　　{id:4, name:‘紫女‘}　　　　　　]
　　　　},
　　　　methods:{//methods中定义了当前vue实例中所有可用的方法
　　　　　 add(){　　　　　　　　this.list.unshift({id: this.id, name: this.name})　　　　　　}
　　　　}
　　})
</script>

注意：

在组件中，使用v-for循环的时候，或者在一些特殊情况下，如果v-for有问题，必须在使用v-for的同时，指定唯一的字符串、数字类型的key，并且要为key使用v-bind

原文地址：https://www.cnblogs.com/xuchao0506/p/10805815.html