vue3 遍历 map 用法

在 Vue 3 中，你可以通过多种方式遍历一个 Map 对象。Map 对象保存键值对，并且能够记住键的原始插入顺序。在 Vue 3 中，你可以使用 v-for 指令来遍历 Map 对象。

示例 1: 直接遍历 Map

如果你想要直接访问每个键值对，你可以这样遍历：

复制代码

<template>
  <div>
    <div v-for="[key, value] of mapData" :key="key">
      {{ key }}: {{ value }}
    </div>
  </div>
</template>
 
<script setup>
import { ref } from 'vue';
 
const mapData = ref(new Map([
  ['key1', 'value1'],
  ['key2', 'value2'],
  ['key3', 'value3']
]));
</script>

示例 2: 使用计算属性转换 Map 为数组

如果你想有更多的灵活性或者在遍历前对 Map 进行处理，你可以先将 Map 转换为数组，然后再进行遍历：

复制代码

<template>
  <div>
    <div v-for="item in mapAsArray" :key="item.key">
      {{ item.key }}: {{ item.value }}
    </div>
  </div>
</template>
 
<script setup>
import { ref, computed } from 'vue';
 
const mapData = ref(new Map([
  ['key1', 'value1'],
  ['key2', 'value2'],
  ['key3', 'value3']
]));
 
const mapAsArray = computed(() => {
  return Array.from(mapData.value, ([key, value]) => ({ key, value }));
});
</script>

示例 3: 使用方法遍历 Map（不推荐直接在模板中）

虽然在模板中直接使用 v-for 来遍历 Map 是最直观的方式，但在某些情况下，你可能想在方法中处理 Map 数据：

复制代码

<template>
  <div>
    <div v-for="item in getMapData" :key="item.key">
      {{ item.key }}: {{ item.value }}
    </div>
  </div>
</template>
 
<script setup>
import { ref } from 'vue';
 
const mapData = ref(new Map([
  ['key1', 'value1'],
  ['key2', 'value2'],
  ['key3', 'value3']
]));
 
function getMapData() {
  return Array.from(mapData.value, ([key, value]) => ({ key, value }));
}
</script>

在 Vue 3 中，你可以通过多种方式遍历 Map 对象。直接在模板中使用 v-for 是最简单和直接的方法。如果你需要在遍历前对数据进行处理或转换，可以考虑使用计算属性或在方法中处理数据。选择哪种方式取决于你的具体需求和偏好。