第二章 Vue快速入门-- 18 v-for中key的使用注意事项

注意:如果属性和方法还没定义直接使用的话，就会报 xxx is not defined 导致界面不能正常显示。我看视频教程里老师的可以直接使用，而且界面正常显示，可能是vue版本不同吗？还不清楚

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 
 4   <head>
 5     <meta charset="utf-8">
 6     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 7     <title>Document</title>
 8     <!--1.导入Vue的包-->
 9     <script src=" https://cdn.jsdelivr.net/npm/vue"></script>   
10   </head>
11 
12   <body>
13       <div id="app">
14       <div>
15         <label>Id:
16           <input type="text" v-model ="id">    
17         </label>
18 
19         <label>Name:
20           <input type="text" v-model="name">
21         </label>
22 
23         <input type="button" value="添加" @click="add">
24 
25       </div>
26        <!--  注意：v-for循环的时候，key属性智能使用number获取string -->
27        <!-- 注意：key 在使用的时候，必须适应v-bind属性绑定的形式，指定key的值 -->
28        <!--添加key是为了保证数据的唯一性，进行数据的关联，防止出现一些问题-->
29 
30       <!--  在组件中，使用v-for循环的时候，或者在一些特殊情况中，如果v-for有问题，必须在使用v-for 的同时，指定唯一的字符串/数字类型  :key值 -->
31         <p v-for="item in list" :key="item.id">
32           <input type="checkbox">{{item.id}}---
33           {{item.name}}
34         </p>
35       </div>
36 
37 
38       <script>
39           //创建 Vue 实例，得到 ViewModel
40           var vm =  new Vue({
41               el:'#app',
42         data:{
43           id:'',
44           name:'',
45          list:[
46              {id:1,name:'李斯'},
47              {id:2,name:'嬴政'},
48              {id:3,name:'赵高'},
49              {id:4,name:'韩非'},
50              {id:5,name:'荀子'}
51          ]
52         },
53         methods:{
54           add(){//添加方法
55             // this.list.push({id:this.id,name:this.name})
56             this.list.unshift({id:this.id,name:this.name})
57           }
58         }
59           });
60       </script>
61   </body>
62 </html>

posted on 2019-06-07 16:10 songsong_p_blue 阅读(241) 评论(0) 编辑收藏举报