脚本宝典收集整理的这篇文章主要介绍了vue.js如何遍历map,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
vue.js遍历map的方法:vue使用【v-for】遍历Map,代码为【<div class="area" v-for="(ITem, key) of cities" :key="key">】。
本教程操作环境:windows10系统、vue2.9,本文适用于所有品牌的电脑。
【相关文章推荐:vue.js】
vue.js遍历map的方法:
对象数据如下:
"cities": { "A": [{ "id": 56, "sPEll": "aba", "name": "阿坝" }, { "id": 57, "spell": "akesu", "name": "阿克苏" }], "B": [{ "id": 58, "spell": "baiyin", "name": "白银" }, { "id": 59, "spell": "bangbu", "name": "蚌埠" }], "C": [{ "id": 60, "spell": "chengdu", "name": "成都" }, { "id": 61, "spell": "cangzhou", "name": "沧州" }]
遍历方法如下:
<div class="area" v-for="(item, key) of cities" :key="key"> <div class="title border-topbottom">{{key}}</div> <div class="item-list"> <div class="item border-bottom" v-for="innerItem of item" :key="innerItem.id">{{innerItem.name}}</div> </div> </div>
关键就是 v-for="(item, key) of cities"
,相当于Map结构的 (key, value)
相关免费学习推荐:JavaScript(视频)
以上就是vue.js如何遍历map的详细内容,更多请关注脚本宝典其它相关文章!
以上是脚本宝典为你收集整理的vue.js如何遍历map全部内容,希望文章能够帮你解决vue.js如何遍历map所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。