列表渲染 | vue v-for
Proudlysponsoredbyv-for可以使用v-for指令基于一个数组渲染一个列表。这个指令使用特殊的语法,形式为iteminitems,items是数据数组,item是当前数组元素的别名:示例:
可以使用 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 }
]
}
})
结果:
在 v-for 块内我们能完全访问父组件作用域内的属性,另有一个特殊变量 $index,正如你猜到的,它是当前数组元素的索引:
<ul id="example-2">
<li v-for="item in items">
{{ parentMessage }} - {{ $index }} - {{ item.message }}
</li>
</ul>
var example2 = new Vue({
el: #example-2,
data: {
parentMessage: Parent,
items: [
{ message: Foo },
{ message: Bar }
]
}
})
结果:
{{ parentMessage }} - {{ $index }}...