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

Posted 2021-11-26 xuchao0506

//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