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>