基本用法
我们用v-for
指令根据一组数组的选项列表进行渲染。v-for
指令需要以item in items
形式的特殊语法,items
是源数据数组并且item
是数组元素迭代的别名。
-
{{ item.message }}
var example1 = new Vue({
el: '#example-1',
data: {
items: [
{message: 'Foo' },
{message: 'Bar' }
]
}
})
// 渲染出FooBar
【列表渲染】
v-for
还支持一个可选的第二个参数index
为当前项的索引:
-
{{ parentMessage }} - {{ index }} - {{ item.message }}
var example2 = new Vue({
el: '#example-2',
data: {
parentMessage: 'Parent',
items: [
{ message: 'Foo' },
{ message: 'Bar' }
]
}
})
// 渲染结果: Parent-0-FooParent-1-Bar
也可以用
of
替代in
作为分隔符,因为它是最接近 JavaScript 迭代器的语法:
对象迭代
可以用
v-for
通过一个对象的属性来迭代。
-
{{ value }}
new Vue({
el: '#repeat-object',
data: {
object: {
firstName: 'John',
lastName: 'Doe',
age: 30
}
}
})
// 遍历出对象属性值: John Doe 30
也可以提供第二个的参数
key
为键名(属性名),第三个参数index
为索引:
{{ key }} : {{ value }}
{{ index }}. {{ key }} : {{ value }}
v-for 和 v-if
v-if
用于条件渲染,当它们处于同一节点,v-for
的优先级比v-if
更高,这意味着v-if
将分别重复运行于每个v-for
循环中。如果你的目的是有条件地跳过循环的执行,那么将
v-if
置于包装元素 或上。如:
-
{{ todo }}