列表渲染
用 v-for 把一个数组对应为一组元素
<div id="app">
<li v-for = "item in array">
{{item.message}}
</li>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
array:[
{message:'vue1'},
{message:'vue2'},
{message:'vue3'}
]
},
})
</script>
<div id="app">
<li v-for = "item in array">
{{item}}
</li>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
array:[
'vue1',
'vue2',
'vue3'
]
},
})
</script>
结果：
1.png
v-for 还支持一个可选的第二个参数为当前项的索引。
<div id="app">
<ul id="example-2">
<li v-for="(item, index) in items">
{{ index }} - {{ item.message }}
</li>
</ul>
</div>
<script>
var example2 = new Vue({
el: '#example-2',
data: {
items: [
{message:'vue1'},
{message:'vue2'},
{message:'vue3'}
]
}
})
</script>
结果：
2.png
对象的 v-for
可以用 v-for 通过一个对象的属性来迭代。
<ul id="v-for-object" class="demo">
<li v-for="value in object">
{{ value }}
</li>
</ul>
<script>
new Vue({
el: '#v-for-object',
data: {
object: {
o: 'vue1',
ob: 'vue2',
obj: 'vue3'
}
}
})
</script>
结果：
3.png
<ul id="v-for-object" class="demo">
<li v-for="(value,key) in object">
{{key}}: {{ value }}
</li>
</ul>
<script>
new Vue({
el: '#v-for-object',
data: {
object: {
obj1: 'vue1',
obj2: 'vue2',
obj3: 'vue3'
}
}
})
</script>
结果：
4.png
<ul id="v-for-object" class="demo">
<li v-for="(value,key,index) in object">
{{index}}. {{key}}: {{ value }}
</li>
</ul>
<script>
new Vue({
el: '#v-for-object',
data: {
object: {
obj1: 'vue1',
obj2: 'vue2',
obj3: 'vue3'
}
}
})
</script>
结果:
5.png
