Vue中v-for属性 - 码农教程

一、遍历数组对象

 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             <p v-for="(item,i) in list"> id：{{item.id}}-----姓名：{{item.name}}-----当前索引：{{i}}</p>
11         </div>
12         <script type="text/javascript">
13             var vm = new Vue({
14                 el: "#app",
15                 data: {
16                     list: [{
17                             id: 1,
18                             name: '张三'
19                         },
20                         {
21                             id: 2,
22                             name: '李四'
23                         },
24                         {
25                             id: 3,
26                             name: '王五'
27                         },
28                         {
29                             id: 4,
30                             name: '赵六'
31                         }
32                     ]
33                 },
34                 methods: {
35 
36                 }
37             })
38         </script>
39     </body>
40 </html>

二、遍历对象

 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             <!-- 在循环遍历对象时有val(值)，key(键)，还有第三个参数(i):表示其索引位置，可以不写 -->
11             <p v-for="(val,key,i) in user">{{key}}:{{val}}+++当前索引是：{{i}}</p>
12         </div>
13     </body>
14     <script type="text/javascript">
15         var vm = new Vue({
16             el: '#app',
17             data: {
18                 user: {
19                     id: 1,
20                     name: '傻娟',
21                     gender: '女'
22                 }
23             }
24         })
25     </script>
26 </html>

三、数字迭代

 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             <p v-for="count in 10">这是第{{count}}次循环</p>
11         </div>
12     </body>
13     <script type="text/javascript">
14         var vm = new Vue({
15             el:"#app",
16             data:{
17                 
18             },
19             methods:{
20                 
21             }
22         })
23     </script>
24 </html>

原文地址：https://www.cnblogs.com/yanghaoyu0624/p/11478040.html