v-for 指令可以绑定数组的数据来渲染一个项目列表：
<div id="app-4">
<ol>
<li v-for="todo in todos">
{{ todo.text }}
</li>
</ol>
</div>
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 块中，我们拥有对父作用域属性的完全访问权限。v-for 还支持一个可选的第二个参数为当前项的索引。
<ul id="example-2">
<li v-for="(item, index) in items">
{{ parentMessage }} - {{ index }} - {{ item.message }}
</li>
</ul>
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循环中（可以为仅有的一些项渲染）