v-for 指令可以绑定数组的数据来渲染一个项目列表：
- { { todo.text }}
var app4 = new Vue({ el: '#app-4', data: { todos: [ { text: '学习 JavaScript' }, { text: '学习 Vue' }, { text: '整个牛项目' } ] } }) 我们用 v-for 指令根据一组数组的选项列表进行渲染。v-for 指令需要使用 item in items 形式的特殊语法，items 是源数据数组并且 item 是数组元素迭代的别名。
在 v-for 块中，我们拥有对父作用域属性的完全访问权限。v-for 还支持一个可选的第二个参数为当前项的索引。
- { { parentMessage }} - { { index }} - { { item.message }}
var example2 = new Vue({ el: '#example-2', data: { parentMessage: 'Parent', items: [ { message: 'Foo' }, { message: 'Bar' } ] } }) <body>
<!-- 一个对象的v-for -->
<!-- 第二个值是键名 -->
<!-- 第三个是索引 -->
<ul id="v-for-object">
<li v-for="(item, key, index) in object">
{ {key}}:{ {item}}--{ {index}}
</li>
</ul>
<script src="vue.js"></script>
<script>
new Vue({
el: '#v-for-object',
data: {
object: {
firstName: 'zhangsan',
secondName: 'lisi',
age: 18
}
}
})
</script>
</body>
v-for和v-if
v-for的优先级比v-if高，所以v-if将分别运行在每个v-for循环中（可以为仅有的一些项渲染）