vue 列表渲染 v-for循环

v-for循环指令类似与html中C标签的循环，同样可以遍历数组，集合。

1、这里演示一下遍历数组的基本用法，代码如下

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4     <meta charset="UTF-8">
 5     <title></title>
 6     <script type="text/javascript"  src="vue.js"></script>
 7 </head>
 8 <body>
 9     <div id="id">
10         <p v-for="arr in array">
11             {{arr.course  }}
12             {{arr.name}} 
13         </p>
14     </div>
15 </body>
16 <script>
17     var vm = new Vue({
18         el:"#id",
19         data:{
20             array:[
21                 {course:'java'},
22                 {course:'Vue.js'},
23                 {course:'javaScript'},
24                 {name:'曹操'},
25                 {name:'孙权'},
26                 {name:'刘备'}
27             ]
28         }
29     })
30 </script>
31 </html>

结果：

在控制台里，输入 id.array.push({ course: '新课程' })，你会发现列表中添加了一个新课程

2、在 v-for 块中，我们拥有对父作用域属性的完全访问权限。 v-for 还支持一个可选的第二个参数为当前项的索引。

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4     <meta charset="UTF-8">
 5     <title></title>
 6     <script type="text/javascript"  src="vue.js"></script>
 7 </head>
 8 <body>
 9     <ul id="app">
10         <li v-for="(p, index) in people"> <!--添加索引-->
11             {{ parentMessage }} --- {{ index }} --- {{ p.name }}
12             <!--访问父作用域属性parentMessage-->
13         </li>
14     </ul>
15 </body>
16     <script>
17     var vm = new Vue({
18         el:"#app",
19         data:{
20             parentMessage: '罗贯中',
21             people: [
22                 {name:'曹操'},
23                 {name:'孙权'},
24                 {name:'刘备'}
25             ]
26          }
27     })
28 </script>
29 </html>

输出结果：

备注：<div v-for="item of items"></div> 用of 代替 in 也是合法的

3、对象迭代 v-for

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4     <meta charset="UTF-8">
 5     <title></title>
 6     <script type="text/javascript"  src="vue.js"></script>
 7 </head>
 8 <body>
 9     <ul id="app">
10         <li v-for="(value,key,index) of object"> <!--添加索引-->
11            {{parentMessage}}---{{key}}{{value}}---{{index}}
12         </li>
13     </ul>
14 </body>
15     <script>
16     var vm = new Vue({
17         el:"#app",
18         data:{
19             parentMessage: '施耐庵',
20             object: {
21                 浪子:'燕青',
22                 花和尚:'鲁智深',
23                 鼓上骚:'时迁'
24             }
25          }
26     })
27 </script>
28 </html>

输出结果：

4、整数迭代 v-for

<div>
  <span v-for="n in 10">{{ n }}</span>
</div>