vue中map函数的用法

在 Vue 中，`v-for` 指令经常用来渲染列表，而 `Array.prototype.map()` 方法可以对数组进行遍历，返回一个新数组。在 Vue 中，可以使用 `v-for` 和 `Array.prototype.map()` 方法结合起来使用渲染列表。具体用法如下：

1. 在 Vue 模板中使用 `v-for` 指令遍历数组：

<template>
  <div>
    <ul>
      <li v-for="(item, index) in items" :key="index">
        {{ item }}
      </li>
    </ul>
  </div>
</template>

2. 在 Vue 实例中定义数组 `items`，并使用 `Array.prototype.map()` 方法对数组进行遍历：

export default {
  data() {
    return {
      items: [1, 2, 3, 4, 5]
    };
  },
  computed: {
    mappedItems() {
      return this.items.map(item => item * 2);
    }
  }
};

在以上代码中，`mappedItems()` 计算属性使用 `Array.prototype.map()` 方法对 `items` 数组进行遍历，并返回一个新数组 `mappedItems`，其中数组中的每个元素都是原数组中对应位置的元素乘以 2。

3. 在 Vue 模板中使用 `v-for` 指令遍历新数组 `mappedItems`：

<template>
  <div>
    <ul>
      <li v-for="(item, index) in mappedItems" :key="index">
        {{ item }}
      </li>
    </ul>
  </div>
</template>

这样就能够将经过 `Array.prototype.map()` 方法处理后的新数组渲染到模板中了。