Vue 合并数组|极客教程

Vue 合并数组

在 Vue 中，有时候我们需要合并多个数组，以便在页面上展示或处理数据。本文将详细介绍在 Vue 中如何合并数组，以及一些常见的用例和技巧。

使用 concat() 方法合并数组

在 JavaScript 中，我们可以使用 concat() 方法来合并两个或多个数组。在 Vue 中，我们也可以通过这种方式来合并数组。

示例代码如下：

new Vue({
  data: {
    array1: [1, 2, 3],
    array2: [4, 5, 6]
  },
  computed: {
    mergedArray: function() {
      return this.array1.concat(this.array2);
    }
  }
});

在上面的示例中，我们定义了两个数组 array1 和 array2，然后通过 computed 属性来计算合并后的数组 mergedArray。当 array1 或 array2 发生变化时，mergedArray 会自动更新。

使用展开运算符合并数组

除了使用 concat() 方法外，我们还可以使用展开运算符（spread operator）来合并数组。这种方法更加简洁和直观。

示例代码如下：

new Vue({
  data: {
    array1: [1, 2, 3],
    array2: [4, 5, 6]
  },
  computed: {
    mergedArray: function() {
      return [...this.array1, ...this.array2];
    }
  }
});

在上面的示例中，我们直接通过 [...this.array1, ...this.array2] 来合并两个数组，代码更加简洁易读。

使用 push() 方法合并数组

在某些情况下，我们可能需要将一个数组的内容添加到另一个数组的末尾，这时可以使用 push() 方法。

示例代码如下：

new Vue({
  data: {
    array1: [1, 2, 3],
    array2: [4, 5, 6]
  },
  methods: {
    mergeArrays: function() {
      this.array1.push(...this.array2);
    }
  }
});

在上面的示例中，我们定义了一个方法 mergeArrays，在这个方法中使用 push() 方法将 array2 的内容添加到 array1 的末尾。

使用 filter() 方法过滤并合并数组

有时候我们需要合并两个数组并去重，这时可以使用 filter() 方法来过滤重复的元素。

示例代码如下：

new Vue({
  data: {
    array1: [1, 2, 3],
    array2: [3, 4, 5]
  },
  computed: {
    mergedArray: function() {
      return this.array1.concat(this.array2).filter((item, index, arr) => arr.indexOf(item) === index);
    }
  }
});

在上面的示例中，我们先使用 concat() 方法合并数组，然后通过 filter() 方法和 indexOf() 方法来去重。这样就可以得到一个合并后并去重的数组。