v-for循环
<div id="qx">
<ul>
<li v-for="v in arr">{{v}}</li>
<li v-for="v in obj">{{v}}</li>
<!--下标-->
<li v-for="(val,ind) in arr">{{ind}}--{{val}}</li>
<li v-for="(value,ind) in arrs">
{{value.num}}
{{value.name}}
{{value.price}}
</li>
</ul>
</div>
<script>
new Vue({//vue实例
el:"#qx",//element选择器
data:{
arr:[1,2,3],
obj:{name:"qianxi",age:18},
arrs:[{
num:1,
name:"apple",
price:2,
},
{
num:2,
name:"banana",
price:4,
},
{
num:3,
name:"orange",
price:6,
}]
}
})
</script>
##表格
<div id="qx">
<table border="1" cellspacing="0">
<thead>
<tr>
<th>编号</th>
<th>名称</th>
<th>价格</th>
</tr>
</thead>
<tbody>
<tr v-for="(val,index) in arrs">
<td>{{index+1 }}</td>
<td>{{val.name}}</td>
<td>{{val.price}}</td>
</tr>
</tbody>
</table>
</div>
<script>
new Vue({
el:"#qx",
data:{
arr:[1,2,3],
arrs:[{
name:"apple",
price:2,
},
{
name:"banana",
price:4,
},
{
name:"orange",
price:6,
}]
}
})
</script>
```
网友评论