列表渲染
我们用 v-for 指令根据一组数组的选项列表进行渲染。v-for 指令需要使用item in items 形式的特殊语法，items 是源数据数组并且 item 是数组元素迭代的别名。
|
<ul id="example-1">
<li v-for="item in items">
{{ item.message }}
</li>
</ul>
|
|
var example1 = new Vue({
el: '#example-1',
data: {
items: [
{ message: 'Foo' },
{ message: 'Bar' }
]
}
})
|
结果：
- Foo
- Bar
在 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' }
]
}
})
|
结果：
- Parent - 0 - Foo
- Parent - 1 - Bar
你也可以用 of 替代 in 作为分隔符，因为它是最接近 JavaScript 迭代器的语法：
|
<div v-for="item of items"></div>
|
一个对象的 v-for
你也可以用 v-for 通过一个对象的属性来迭代。
|
<ul id="v-for-object" class="demo">
<li v-for="value in object">
{{ value }}
</li>
</ul>
|
|
new Vue({
el: '#v-for-object',
data: {
object: {
firstName: 'John',
lastName: 'Doe',
age: 30
}
}
})
|
结果：
- John
- Doe
- 30
你也可以提供第二个的参数为键名：
|
<div v-for="(value, key) in object">
{{ key }}: {{ value }}
</div>
|
firstName: John
lastName: Doe
age: 30
第三个参数为索引：
|
<div v-for="(value, key, index) in object">
{{ index }}. {{ key }}: {{ value }}
</div>
|
0. firstName: John
1. lastName: Doe
2. age: 30