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的详细内容，更多内容请关注技术你好其它相关文章！