vue - for 遍历对象和遍历对象数组

1. 遍历对象时,参数：第一个为值，第二个为键名，第三个为索引

 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     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8     <title>Document</title>
 9     <!-- Step1.对于vue,可以用cdn -->
10     <script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.min.js"></script>
11     <style>
12         #app div{
13             padding: 2%;
14             margin-bottom: 1%;
15             border-bottom: 1px solid #ddd;
16             background-color: blanchedalmond;
17         }
18     </style>
19 </head>
20 
21 <body>
22 
23 
24     <div id="app">
25 
26 
27         <!-- 对象遍历 -->
28         <div v-for="(value, key, index) in object">
29             {{ index }}. {{ key }} - {{ value }}
30         </div>
31 
32         <!-- 数组对象遍历 -->
33         <div v-for="(value, key, index) in objectArray">
34             姓名：{{value.name}}
35             年龄:{{value.age}}
36         </div>
37 
38     </div>
39 
40     <script type="text/javascript">
41         var app = new Vue({
42             el: '#app',
43             data: {
44                 // 对象
45                 object: {
46                     name: '张三',
47                     names: '李四'
48                 },
49 
50                 // 数组对象
51                 objectArray: [
52                     {
53                         name: '张三',
54                         age: 14
55                     },
56                     {
57                         name: '李四',
58                         age: 18
59                     }
60                 ]
61             }
62         })
63     </script>
64 </body>
65 
66 </html>

1. 遍历对象时,参数：第一个为值，第二个为键名，第三个为索引

 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     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8     <title>Document</title>
 9     <!-- Step1.对于vue,可以用cdn -->
10     <script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.min.js"></script>
11     <style>
12         #app div{
13             padding: 2%;
14             margin-bottom: 1%;
15             border-bottom: 1px solid #ddd;
16             background-color: blanchedalmond;
17         }
18     </style>
19 </head>
20 
21 <body>
22 
23 
24     <div id="app">
25 
26 
27         <!-- 对象遍历 -->
28         <div v-for="(value, key, index) in object">
29             {{ index }}. {{ key }} - {{ value }}
30         </div>
31 
32         <!-- 数组对象遍历 -->
33         <div v-for="(value, key, index) in objectArray">
34             姓名：{{value.name}}
35             年龄:{{value.age}}
36         </div>
37 
38     </div>
39 
40     <script type="text/javascript">
41         var app = new Vue({
42             el: '#app',
43             data: {
44                 // 对象
45                 object: {
46                     name: '张三',
47                     names: '李四'
48                 },
49 
50                 // 数组对象
51                 objectArray: [
52                     {
53                         name: '张三',
54                         age: 14
55                     },
56                     {
57                         name: '李四',
58                         age: 18
59                     }
60                 ]
61             }
62         })
63     </script>
64 </body>
65 
66 </html>

vue - for 遍历对象和遍历对象数组

猜你喜欢