vue 中遍历普通数组，对象数组，遍历对象 v-for
1、遍历普通数组
<div id="login">
<ul>
//一个变量
<li v-for="item in array">{{item}}</li>
</ul>
<ul>
//两个变量
<li v-for="(item,index) in array">{{index+1}} {{item}}</li>
</ul>
</div>
<script>
new Vue({
el:"#app",
data:{
array:['东','西','南','北']
}
});
</script>
如上面的代码所展示的
当 in 前面有一个变量的时候 那么这个变量是数组中的数据
如下结果：
东
西
南
北
当 in 前面有两个变量的时候 那么第一个变量是数组中的数据 而第二个变量则是下标
结果如下：
1 东
2 西
3 南
4北
2、遍历对象数组
<div id="more">
<table border="1">
<thead>
<tr>
<th><input type="checkbox"></th>
<th>序号</th>
<th>商品名称</th>
<th>商品分类</th>
<th>商品价格</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr v-for="(item,index) in array">
<td><input type="checkbox"></td>
<td>{{index+1}}</td>
<td>{{item.wares}}</td>
<td>{{item.sort}}</td>
<td>{{item.money}}</td>
<td>
<button>编辑</button>
<button>删除</button>
</td>
</tr>
</tbody>
</table>
</div>
<script>
new Vue({
el:'#more',
data:{
array:[
{
wares :'草莓',
sort:'鲜果类',
money:'19.99'
},
{
wares :'葡萄',
sort:'鲜果类',
money:'9.99'
},
{
wares :'柠檬',
sort:'鲜果类',
money:'4.99'
},
{
wares :'西瓜',
sort:'鲜果类',
money:'7.99'
},{
wares :'香蕉',
sort:'鲜果类',
money:'6.99'
},
]
}
})
</script>
当 in 前面有一个变量的时候 那么这个变量存的是{对象}
当 in 前面有两个变量的时候 那么第一个变量存的是{对象} 而第二个变量则是下标
运行结果如下：
3、遍历对象
<div id="somewares">
<ul v-if="obj.code === 200">
<li v-for="(a1) in obj">{{a1}}</li>
//<li v-for="(a1,a2) in obj">{{a1}}>>>>>>{{a2}}</li>
//<li v-for="(a1,a2,a3) in obj">{{a1}}>>>>>>{{a2}}>>>>>>>{{a3}}</li>
</ul>
</div>
<script>
new Vue({
el:'#somewares',
data:{
obj:{
code:200,
message:'成功',
data:[
{
wares :'草莓',
sort:'鲜果类',
money:'19.99'
}]
}
}
})
</script>
如果是三个变量，那么第一个变量保存的是属性值，第二个变量保存的是属性名，第三个变量保存的是下标
如果是两个变量，那么第一个变量保存的是属性值，第二个变量保存的是属性名
一个变量，那么保存的是对象中的属性值
