微信扫一扫打赏支持

VUE课程参考---14、v-for中key属性使用

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>

 

 

 

 

 
posted @ 2020-05-14 07:58  范仁义  阅读(245)  评论(0)    收藏  举报