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>