1 <html lang="en"> 2 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>v-for遍历的数组对象</title> 8 <script src="../js/vue.js"></script> 9 </head> 10 11 <body> 12 <div id="app"> 13 <div> id: <input type="text" v-model="id"> 14 name:<input type="text" v-model="name"> 15 <button @click="add">添加</button> 16 </div> 17 <!-- 注意 :v-for 循环的时候,key 属性只能使用number获取string --> 18 <!-- 注意: key在使用的时候,必须使用v-bind属性的绑定形式 指定key的值 --> 19 <!-- 在组件中,使用v-for 循环的时候,或者在一些特殊的情况中 ,如果v-for有问题 20 ,必须使用 v-for的同时,指定唯一的字符串/数字 类型:key值--> 21 <div v-for='(item ,i) in list' :key='item.id'> <input type="checkbox" />{{item.id}}-->{{item.name}}</div> 22 23 </div> 24 <script> 25 var vm = new Vue({ 26 el: "#app", 27 data: { 28 id: '', 29 name: "", 30 list: [ 31 { 32 id: 0, 33 name: "秦始皇" 34 }, { 35 id: 1, 36 name: '赵高', 37 38 }, { 39 id: 2, 40 name: '李斯' 41 }, 42 { 43 id: 3, 44 name: '赵姬' 45 } 46 47 ] 48 49 }, 50 methods: { 51 add() { 52 this.list.push({ id: this.id, name: this.name }) 53 } 54 } 55 }) 56 </script> 57 </body> 58 59 </html>