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>
View Code