vue 中遍歷普通數(shù)組振峻，對(duì)象數(shù)組臼疫，遍歷對(duì)象? v-for
1、遍歷普通數(shù)組
<div id="login">
? ? <ul>
????????//一個(gè)變量
? ? ? ? <li v-for="item in array">{{item}}</li>
? ? </ul>
? ? <ul>
? ? ? ? //兩個(gè)變量
? ? ? ? <li v-for="(item,index) in array">{{index+1}} {{item}}</li>
? ? </ul>
</div>
<script>
new Vue({
? ? ? ? el:"#app",
? ? ? ? data:{
? ? ? ? ? ?array:['東','西','南','北']
? ? ? ? }
? ? });
</script>
如上面的代碼所展示的
當(dāng) in 前面有一個(gè)變量的時(shí)候? 那么這個(gè)變量是數(shù)組中的數(shù)據(jù)
如下結(jié)果：
東
西
南
北
當(dāng) in 前面有兩個(gè)變量的時(shí)候? 那么第一個(gè)變量是數(shù)組中的數(shù)據(jù)? ?而第二個(gè)變量則是下標(biāo)
結(jié)果如下：
1 東?
2 西
3 南
4北
2扣孟、遍歷對(duì)象數(shù)組
<div id="more">
? ? <table border="1">
? ? ? ? <thead>
? ? ? ? ? ? <tr>
? ? ? ? ? ? ? ? <th><input type="checkbox"></th>
? ? ? ? ? ? ? ? <th>序號(hào)</th>
? ? ? ? ? ? ? ? <th>商品名稱</th>
? ? ? ? ? ? ? ? <th>商品分類</th>
? ? ? ? ? ? ? ? <th>商品價(jià)格</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>
當(dāng) in 前面有一個(gè)變量的時(shí)候? 那么這個(gè)變量存的是{對(duì)象}
當(dāng) in 前面有兩個(gè)變量的時(shí)候? 那么第一個(gè)變量存的是{對(duì)象}? ?而第二個(gè)變量則是下標(biāo)
運(yùn)行結(jié)果如下：
3烫堤、遍歷對(duì)象
<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>
????????????如果是三個(gè)變量，那么第一個(gè)變量保存的是屬性值凤价，第二個(gè)變量保存的是屬性名鸽斟，第三個(gè)變量保存的是下標(biāo)
????????????如果是兩個(gè)變量，那么第一個(gè)變量保存的是屬性值利诺，第二個(gè)變量保存的是屬性名
????????????一個(gè)變量富蓄，那么保存的是對(duì)象中的屬性值
