VUE课程参考---14、v-for中key属性使用
一、总结
一句话总结：
v-for循环的key属性 用来跟踪每个节点的身份，从而避免重新排序元素造成的元素状态混乱
<p v-for="item in list" :key="item.id"> <input type="checkbox">{{item.id}} --- {{item.name}} </p>
1、v-for循环的key属性 使用注意？
注意：v-for 循环的时候，key 属性只能使用 number或者string，不能是对象
注意：key 在使用的时候，必须使用 v-bind 属性绑定的形式，指定 key 的值
<p v-for="item in list" :key="item.id"> <input type="checkbox">{{item.id}} --- {{item.name}} </p>
二、v-for中key属性使用
博客对应课程的视频位置：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>1、v-for中key属性使用</title> 6 </head> 7 <body> 8 <!-- 9 10 v-for循环的key属性 用来跟踪每个节点的身份，从而避免重新排序元素造成的元素状态混乱 11 12 13 v-for循环的key属性 使用注意 14 注意：v-for 循环的时候，key 属性只能使用 number获取string 15 注意：key 在使用的时候，必须使用 v-bind 属性绑定的形式，指定 key 的值 16 17 18 --> 19 <div id="app"> 20 <div> 21 <label for="id">ID</label> 22 <input type="text" id="id" v-model="id"> 23 <label for="name">Name</label> 24 <input type="text" id="name" v-model="name"> 25 <input type="button" value="添加" @click="add"> 26 </div> 27 28 <p v-for="item in list" :key="item.id"> 29 <input type="checkbox">{{item.id}} --- {{item.name}} 30 </p> 31 </div> 32 <script src="../js/vue.js"></script> 33 <script> 34 let vm = new Vue({ 35 el: '#app', 36 data: { 37 id: '', 38 name:'', 39 list:[ 40 {id:1,name:'吕布'}, 41 {id:2,name:'赵云'}, 42 {id:3,name:'刘禅'}, 43 {id:4,name:'张飞'}, 44 {id:5,name:'貂蝉'}, 45 {id:6,name:'诸葛亮'} 46 ] 47 }, 48 methods:{ 49 add:function () { 50 // this.list.push({id:this.id,name:this.name}); 51 this.list.unshift({id:this.id,name:this.name}); 52 } 53 } 54 }); 55 </script> 56 </body> 57 </html>
