1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <script src="../vue.js" type="text/javascript" charset="utf-8"></script> 7 </head> 8 <body> 9 <div id="app"> 10 <span>ID: 11 <input type="text" v-model="id" /> 12 </span> 13 <span>Name: 14 <input type="text" v-model="name" /> 15 </span> 16 <input type="button" value="提交" @click="btn" /> 17 18 <!-- 注意：v-for循环的时候，key属性只能使用number获取string --> 19 <!-- 注意：key在使用的时候，必须使用v-band属性绑定的形式，指定key的值 --> 20 <!-- 在组件中，使用v-for循环的时候，或者在一些特殊情况中， 21 如果v-for 有问题，必须 在使用v-for的同时，指定唯一大的 字符串/数字 类型 :key 值 --> 22 <p v-for="item in list" :key="item.name"> 23 <input type="checkbox"> 24 {{item.id}}---{{item.name}} 25 </p> 26 </div> 27 </body> 28 <script type="text/javascript"> 29 var vm = new Vue({ 30 el: '#app', 31 data: { 32 list: [ 33 {id: 1,name: '张狗蛋'}, 34 {id: 2,name: '杨爸爸'}, 35 {id: 3,name: '张小狗蛋'}, 36 {id: 4,name: '杨大爸爸'} 37 ], 38 id:"", 39 name:"" 40 }, 41 methods:{ 42 btn:function(){ 43 this.list.unshift({id:this.id,name:this.name}); 44 } 45 } 46 }) 47 </script> 48 </html>