v-for指令，看名字想必大家也能猜到其作用，没错，就是用来迭代、遍历的。
1、简单数组的遍历
<body>
<divi id="app">
<span v-for="item in list">{{item}} </span>
</div> <script type="text/javascript">
var vm = new Vue({
el:"#app",
data:{
list:['one','two','three','four','five']
},
methods:{}
})
</script>
</body>
data里定义了list字符串数组，在页面中使用v-for指令对list进行遍历，"item"是当前正在遍历的元素对象，“in”是固定语法，“list”是被遍历的数组。用插值表达式来展示当前遍历的对象。
有时除了遍历数据外，我们还需要当前遍历的序号：
<divi id="app">
<span v-for="(item,i) in list">序号为：{{i}}，元素为：{{item}}<br></span>
</div>
（Item,i）其中i为序号，当然i和item是临时变量可以任意定义。运行结果：
2、对象数组的遍历
<body>
<divi id="app">
<span v-for="(item,i) in list">序号：{{i}}，科目为：{{item.course}}，分数为：{{item.score}}<br></span>
</div> <script type="text/javascript">
var vm = new Vue({
el:"#app",
data:{
list:[
{'course':'语文', 'score':89},
{'course':'数学', 'score':80},
{'course':'英语', 'score':90}
]
},
methods:{}
})
</script>
</body>
通过"item.score"的方法，来获取对象的属性值。运行结果如下：
3、遍历对象
<body>
<divi id="app">
<span v-for="(value,key) in mark">属性名：{{key}}，属性值：{{value}}<br></span>
</div> <script type="text/javascript">
var vm = new Vue({
el:"#app",
data:{
mark:{
'语文':90,
'数学':95,
'英语':89
}
},
methods:{}
})
</script>
</body>
这里定义了一个mark对象，该对象有三个属性，遍历对象的时候固定写法为：(XX,YY)，其中YY为对象的key，XX为对象的值。
当然也可以写成：(XX,YY,i)，其中i为索引值。
4、遍历数字
<divi id="app">
<span v-for="count in 5">当前数字为：{{count}}<br></span>
</div>
这里in后面直接写的是具体的数字。运行结果：
总结：v-for进行遍历的时候，其可以遍历数组、对象数组、对象、数字。
每天进步一点点！