列表渲染
我们用 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