vue 遍历map

作者：亡梦发布日期:2026-04-19 浏览:97

// Vue 遍历 Map 示例代码

<template>
  <div>
    <!-- 使用 v-for 指令遍历 map -->
    <ul>
      <li v-for="[key, value] of myMap" :key="key">
        {{ key }}: {{ value }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 创建一个 Map 对象
      myMap: new Map([
        ['name', 'Alice'],
        ['age', 25],
        ['city', 'Beijing']
      ])
    };
  }
};
</script>

<!-- 解释说明:
1. 在 template 中使用 v-for 指令遍历 myMap。
2. v-for 的语法为 [key, value] of myMap，其中 key 和 value 分别代表 Map 中的键和值。
3. :key 绑定到 key，确保每个列表项有唯一的标识符，提升渲染性能。
4. 在 script 中定义了一个包含键值对的 Map 对象，并将其赋值给 myMap。
5. 最终在页面上会显示 Map 中的每一对键值。 -->

上一篇：vue eventsource

下一篇：vue3 获取元素高度