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>