v-for 遍历map
时间: 2023-09-10 13:10:21 浏览: 199
在Vue2中,使用`v-for`遍历`Map`可以通过以下方式进行操作。首先,需要将`Map`转换为一个数组才能进行遍历。可以使用`Array.from()`或者``来进行转换。然后,使用`v-for`指令来进行循环遍历,在循环过程中可以使用`(value, key)`语法来获取`Map`中的键值对。例如,如果`map`是一个`Map`对象,可以这样遍历它:
```
<template>
<div>
<div v-for="(value, key) in Array.from(map)" :key="key">
{{ key }}: {{ value }}
</div>
</div>
</template>
<script>
export default {
data() {
return {
map: new Map([
['key1', 'value1'],
['key2', 'value2'],
['key3', 'value3']
])
}
}
}
</script>
```
上面的代码将会遍历`map`中的所有键值对,并在页面中显示出来。每个键值对都可以通过`value`和`key`来访问。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *2* [v-for遍历Map分析](https://blog.csdn.net/attack_breast/article/details/120748912)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"]
- *3* [Vue使用v-for遍历map](https://blog.csdn.net/m0_54866636/article/details/123704386)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]
阅读全文