v-for迭代数组
我们可以用 v-for
指令基于一个数组来渲染一个列表。v-for
指令需要使用 "item in items"
形式的特殊语法,其中 items
是源数据数组,而 item
则是被迭代的数组元素的别名。
<div id="root">
<h2>人员列表</h2>
<ul>
<li v-for = "p in persons">
{{p.name}}--{{p.age}}
</li>
</ul>
</div>
<script>
new Vue({
el:'#root',
data:{
persons:[
{name:'张三',age:18},
{name:'李四',age:19},
{name:'王五',age:22},
]
}
})
</script>
其中 persons 是源数据数组,而p 则是被迭代的数组元素的别名。
在 v-for
块中,我们可以访问所有父作用域的 property。v-for
还支持一个可选的第二个参数,即当前项的索引。
<ul>
<li v-for = "(p,index) in persons" :key="index">
{{p.name}}--{{p.age}}--{{index}}
</li>
</ul>
我们也可以用
of
替代in
作为分隔符, <li v-for = "(p,index) of persons" :key="index">
v-for迭代对象
我们也可以用v-for来遍历一个对象的属性。
<div id="root">
<h2>汽车列表</h2>
<ul>
<li v-for = "value of car" >
{{value}}
</li>
</ul>
</div>
<script>
new Vue({
el:'#root',
data:{
car:{
name:'宝马7x',
price:'128万',
color:'红色'
}
}
})
</script>
提供第二个的参数为键名时:
v-for 迭代整数