vue中json和数组的遍历

for和of循环

第一种情况item of json

jsont={
A:[{name: "阿坝", spellName: "aba", id: 5780, fullname: "四川/阿坝", sortLetters: "a"},{name: "阿克苏", spellName: "akesudi", id: 6474, fullname: "新疆/阿克苏", sortLetters: "a"},{name: "阿拉善", spellName: "alashanmeng", id: 3862, fullname: "内蒙古/阿拉善", sortLetters:"a"}],
B:[{name: "白城", spellName: "baicheng", id: 4041, fullname: "吉林/白城", sortLetters: "b"},{name: "百色", spellName: "baise", id: 5527, fullname: "广西/百色", sortLetters: "b"}]

<div class="area" v-for="(item,key) of jsont">//遍历对象类型的数据
    <div class="title ">{{key}}</div>
    <div class="item-list">
        <div class="item" v-for="innerItem of item">
            {{innerItem.name}}
        </div>
    </div>
</div>

最终结果

image.png

第二种情况item in arr

arr=['1','2','3','4']
<div v-for="(item,index) in arr">//遍历数组类型
  <div>{{item}}</div>
</div>

其实我们在项目中用的比较多的还是in的方法,json类型的也是可以使用in的方法

json={1:[],2:[],}也是可以使用的
<div v-for="(item,key,index) in arr">// key的结果就是1,2
  <div>{{item}}</div>
</div>

在使用v-for进行数组的分组展示时候使用的方法

let groupNum = 3 //一组展示的数量
<div v-for="(item, index) in arr/groupNum ">
  <div v-for="(item1, index1) in groupNum">
    {{arr[index1+groupNum *index]}}
  </div>
</div>