Vue指令3：v-for

列表渲染

我们用 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