VUE课程---18、v-for中key属性使用
一、总结
一句话总结：
v-for循环的key属性的作用是用来标注v-for循环的每一项的唯一身份，也就是用来跟踪每个节点的身份，从而避免重新排序元素造成的元素状态混乱
<p v-for="item in list" v-bind:key="item.id"> <input type="checkbox">{{item.id}}---{{item.name}} </p>
1、v-for循环的key属性的使用注意？
a、key属性只能是数字或者字符串
b、key属性必须用v-bind来绑定
<p v-for="item in list" v-bind:key="item.id"> <input type="checkbox">{{item.id}}---{{item.name}} </p>
2、v-for循环的key属性的使用场景？
在组件或者一些直接v-for循环会有bug的场景，可以使用v-for循环的key属性。推荐所有的v-for循环都带上key属性。
二、v-for中key属性使用
博客对应课程的视频位置：18、v-for中key属性使用
https://www.fanrenyi.com/video/26/235
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>v-for中key属性使用</title> 6 </head> 7 <body> 8 <!-- 9 1、key属性的作用 10 用来标注v-for循环的每一项的唯一身份 11 12 2、key属性的使用注意 13 key属性值只能是数字或者字符串 14 key属性必须用v-bind来绑定 15 16 3、key属性的使用场景 17 在组件或者一些直接v-for循环会有bug的场景 18 推荐v-for循环都带上key属性 19 20 --> 21 <div id="app"> 22 <div> 23 id: <input type="text" v-model="id"> 24 name: <input type="text" v-model="name"> 25 <input type="button" value="提交" @click="add"> 26 </div> 27 <!-- 28 key属性值必须是字符串或者数字 29 --> 30 <p v-for="item in list" v-bind:key="item.id"><input type="checkbox">{{item.id}}---{{item.name}}</p> 31 </div> 32 <script src="../js/vue.js"></script> 33 <script> 34 new Vue({ 35 el:'#app', //element 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 ] 46 }, 47 methods:{ 48 add(){ 49 this.list.unshift({id:this.id,name:this.name}); 50 } 51 } 52 }); 53 </script> 54 </body> 55 </html>
