基本用法
我們用v-for指令根據(jù)一組數(shù)組的選項列表進行渲染。v-for指令需要以item in items形式的特殊語法来候，items是源數(shù)據(jù)數(shù)組并且item是數(shù)組元素迭代的別名。
<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還支持一個可選的第二個參數(shù)index為當前項的索引：
<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通過一個對象的屬性來迭代舞吭。
<ul id="repeat-object" class="demo">
<li v-for="value in object">
{{ value }}
</li>
</ul>
new Vue({
el: '#repeat-object',
data: {
object: {
firstName: 'John',
lastName: 'Doe',
age: 30
}
}
})
// 遍歷出對象屬性值： John Doe 30
也可以提供第二個的參數(shù)key為鍵名（屬性名），第三個參數(shù)index為索引：
<div v-for="(value, key) in object">
{{ key }} : {{ value }}
</div>
<div v-for="(value, key, index) in object">
{{ index }}. {{ key }} : {{ value }}
</div>
v-for 和 v-if
v-if用于條件渲染纺念，當它們處于同一節(jié)點，v-for的優(yōu)先級比v-if更高想括，這意味著v-if將分別重復運行于每個v-for循環(huán)中陷谱。
如果你的目的是有條件地跳過循環(huán)的執(zhí)行，那么將v-if置于包裝元素 或<template>上瑟蜈。如:
<ul v-if="shouldRenderTodos">
<li v-for="todo in todos">
{{ todo }}
</li>
</ul>
