v-for 列表渲染指令
v-for 列表渲染指令#
当需要将一个数组遍历或枚举一个对象循环显示时,就会用到列表渲染指令 v-for,它的表达式需结合 in 来使用,类似 item in items 的形式
<div id="app">
<ul>
//index是一个可选参数,作为当前项的索引
<li v-for="(book,index) in books">{{ index }} - {{ book.name }}</li>
</ul>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
books: [
{ name: 'vue.js' },
{ name: 'javascript' },
{ name: 'node.js' }
]
}
})
</script>
v-for 也可以用在内置标签 template 上,将多个元素进行渲染
<div id="app">
<ul>
<template v-for="book in books">
<li>书名:{{ book.name }}</li>
<li>作者:{{ book.author }}</li>
</template>
</ul>
</div>
<script>
var app = new Vue({
el:'#app',
data: {
books: [
{
name: 'vuejs',
author: 'liang'
},
{
name: 'javascript',
author: 'douglas'
},
{
name: 'nodejs',
author: 'thomas'
}
]
}
})
</script>
除了数组,对象的属性也是可以遍历的
<div id="app">
//遍历对象属性时,有两个可选参数,分别时键名key和索引index
<span v-for="(value, key, index) in user">
{{ index }} - {{ key }}: {{ value }}
</span>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
user: {
name: 'aresn',
gender: '男',
age: 26
}
}
})
</script>
本作品采用《CC 协议》,转载必须注明作者和本文链接
推荐文章: