vue map遍历

// 使用 Vue 和 map 方法遍历数组

new Vue({
  el: '#app',
  data: {
    items: [
      { id: 1, name: '苹果' },
      { id: 2, name: '香蕉' },
      { id: 3, name: '橙子' }
    ]
  },
  computed: {
    // 使用 map 方法将 items 数组中的每个对象的 name 属性提取出来，形成一个新的数组
    itemNames() {
      return this.items.map(item => item.name);
    }
  }
});

// HTML 部分
<div id="app">
  <ul>
    <!-- 使用 v-for 指令遍历 itemNames 数组并显示 -->
    <li v-for="name in itemNames" :key="name">{{ name }}</li>
  </ul>
</div>

解释说明：

1. Vue 实例：我们创建了一个 Vue 实例，并在 data 中定义了一个包含多个对象的数组 items。
2. map 方法：在 computed 属性中，我们使用了 JavaScript 的 map 方法来遍历 items 数组。map 方法会返回一个新数组，其中每个元素都是调用提供的函数的结果。在这个例子中，我们将每个对象的 name 属性提取出来，形成一个新的数组 itemNames。
3. v-for 指令：在 HTML 部分，我们使用了 Vue 的 v-for 指令来遍历 itemNames 数组，并将每个元素显示为一个列表项。

这样，页面上会显示一个包含 "苹果", "香蕉", "橙子" 的列表。