vue指令，v-for与key属性

在2.20版本中，当我们组件中使用v-for时候，key现在是必须的当vue.js用v-for正在跟新渲染过的元素列表时，他默认用“就地复用”原则，如果数据项目的顺序被改变了，Vue将不是移动DOM 元素来匹配数据项的顺序，而是简单的复用此处每个元素，并且确保他在特定的索引下显示已经被渲染的每个元素。

为了给每一个Vue一个提示，以便于追踪每个节点的身份，从而复用和重新排序现有的元素，你需要单独为每一项提供一项一个唯一的key属性

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <title>v-for和key</title>
 7     <script src="https://cdn.bootcss.com/vue/2.5.16/vue.js"></script>
 8 </head>
 9 <body>
10    
11     <div id="app">
12          <!-- 普通v-for循环数组 -->
13         <p v-for="(item,i) in list">索引值：{{ i }}---每一项：{{ item }}</p>
14 
15         <!-- 迭代对象中的属性（顺序是：值，键，索引）循环遍历对象身上的属性 -->
16         <p v-for="(val, key, i) in user">值是： {{ val }} --- 键是： {{key}} -- 索引： {{i}}</p>
17 
18         <!-- 迭代数字(i从1开始) -->
19         <p v-for="i in 10">{{i}}</p>
20     
21     
22     <div>
23         <label>Id:
24           <input type="text" v-model="page">
25         </label>
26   
27         <label>Name:
28           <input type="text" v-model="Name">
29         </label>
30   
31         <input type="button" value="添加" @click="add">
32       </div>
33   
34       <!-- 注意： v-for 循环的时候，key 属性只能使用 number获取string -->
35       <!-- 注意： key 在使用的时候，必须使用 v-bind 属性绑定的形式，指定 key 的值 -->
36       <!-- 在组件中，使用v-for循环的时候，或者在一些特殊情况中，如果 v-for 有问题，必须 在使用 v-for 的同时，指定 唯一的 字符串/数字 类型 :key 值 -->
37       <p v-for="it in li" :key="it.page">
38         <input type="checkbox">{{it.page}} --- {{it.Name}}
39       </p>
40     </div>
41 </div>
42     <script>
43 
44         //创建实列
45         var vm = new Vue({
46             el:'#app',
47             data:{
48                 list:[1,2,3,4,5],
49 
50                 user:{
51                     id:1,
52                     name:'yun',
53                     gender:'你'
54 
55                 },
56                 page: '',
57                 Name: '',
58                 li: [
59           { page: 1, Name: '宝马' },
60           { page: 2, Name: '奔驰' },
61           { page: 3, Name: '宝骏' },
62           { page: 4, Name: '奥迪' },
63         ]
64             },
65             methods: {
66                 add() { // 添加方法
67           this.li.unshift({ page: this.page, Name: this.Name })
68         }
69             }
70         });
71     </script>
72 </body>
73 </html>

 

posted @ 2020-03-22 21:28  社会主义核心价值观  阅读(522)  评论(0)    收藏  举报
Live2D