Vue中map()的用法案例

下面是关于“Vue中map()的用法案例”的完整攻略。

什么是map()函数

map()函数是JavaScript中的一个方法，它可以在一个数组上调用，返回一个新的数组。这个方法作用于数组的每一项来创建一个新的值。Vue中的map()函数也和JavaScript中的map()函数相似，但是它适用于Vue组件中的一个对象数组。

Vue中map()函数的用法

在Vue中，map()函数是组合计算属性的一个便捷方法。它接收两个参数，第一个参数是一个数组，第二个参数是一个回调函数。回调函数会被传递数组的每一项，将每个项转换为一个新的值并返回一个新的数组。

下面是一个简单的示例，它演示了如何在Vue组件中使用map()函数：

<template>
  <ul>
    <li v-for="item in formattedItems" :key="item.id">
      {{ item.text }}
    </li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, text: 'Apple' },
        { id: 2, text: 'Banana' },
        { id: 3, text: 'Cherry' },
        { id: 4, text: 'Durian' },
        { id: 5, text: 'Eggplant' },
      ],
    };
  },
  computed: {
    formattedItems() {
      return this.items.map((item) => {
        return { ...item, text: item.text.toUpperCase() };
      });
    },
  },
};
</script>

在此示例中，我们有一个数据对象items，包含了一组对象，每个对象都有一个id和一个text属性。在我们的计算属性formattedItems中，我们使用了map()函数来将items中每个对象的text属性转换为大写。最终，我们返回一个新的数组，该数组包含了每个对象的id和大写后的text属性。我们可以在模板中使用v-for指令来遍历这个新的数组。

下面是另一个示例，它演示了如何使用map()函数来构建一个过滤器：

<template>
  <div>
    <input v-model="searchText" />
    <ul>
      <li v-for="item in filteredItems" :key="item.id">
        {{ item.text }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, text: 'Apple' },
        { id: 2, text: 'Banana' },
        { id: 3, text: 'Cherry' },
        { id: 4, text: 'Durian' },
        { id: 5, text: 'Eggplant' },
      ],
      searchText: '',
    };
  },
  filters: {
    filterItems(items, searchText) {
      return items.filter((item) => {
        return item.text.startsWith(searchText);
      });
    },
  },
  computed: {
    filteredItems() {
      return this.items.map((item) => {
        return { ...item };
      }).filter((item) => {
        return this.searchText ? item.text.startsWith(this.searchText) : true;
      });
    },
  },
};
</script>

在此示例中，我们有一个数据对象items，它包含了一组对象，每个对象都有一个id和一个text属性。用户可以在输入框中输入文字进行过滤。我们在计算属性filteredItems中使用了map()函数和filter()函数来构建一个新的数组。在map()函数中，我们浅拷贝了每个对象。在filter()函数中，我们使用了搜索文本来筛选text属性以搜索过滤需要的数据。最终我们返回一个新的过滤后的数组，该数组由ul中的每个li列表项展示出来。