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 是最简单和直接的方法。如果你需要在遍历前对数据进行处理或转换，可以考虑使用计算属性或在方法中处理数据。选择哪种方式取决于你的具体需求和偏好。