Vue.js method of traversing map: vue uses [v-for] to traverse Map, the code is [
】.
The operating environment of this tutorial: windows10 system, vue2.9, this article is applicable to all brands of computers.
【Recommended related articles: vue.js】
vue.js method of traversing map:
The object data is as follows:
"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": "沧州" }]Copy after loginThe traversal method is as follows:
<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>Copy after loginThe key is
v-for="(item, key) of cities", which is equivalent to the Map structure(key, value)Related free learning recommendations: JavaScript(Video)
The above is the detailed content of How vue.js traverses map. For more information, please follow other related articles on the PHP Chinese website!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
