注意:如果属性和方法还没定义直接使用的话，就会报 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>