Vuejs从数组中删除元素的示例代码

当我们在Vuejs中使用数组时，有时需要删除内部的元素。在本文中，我们将讨论如何使用Vuejs从数组中删除元素的示例代码。

示例1：使用Vuejs的原生方法splice删除元素

Vuejs中可以使用JavaScript原生方法splice()从数组中删除元素。 这个方法接受两个参数，一个是开始的索引，另一个是要删除的元素数量。

// 假设我们有一个数组如下：
let fruits = ['apple', 'banana', 'orange', 'grape'];

// 我们要删除索引为1的元素（即'banana'），可以如下操作：
fruits.splice(1, 1);

// 然后打印数组，结果为 ['apple', 'orange', 'grape']。
console.log(fruits);

使用Vuejs的原生方法splice删除元素的过程非常简单，只需要调用splice()方法即可。

示例2：使用Vuejs的方法filter和indexOf删除元素

我们还可以使用Vuejs的方法filter和indexOf来删除数组中的元素，这个方法效果与splice()一样，但是更为直观。

我们先定义一个组件的data：

data() {
  return {
    fruits: ['apple', 'banana', 'orange', 'grape']
  }
}

然后，在该组件中，我们可以这样写：

// 要删除的元素的索引
let index = this.fruits.indexOf('banana');

if (index !== -1) {
  // 使用Vuejs的filter过滤数组
  this.fruits = this.fruits.filter((value, i) => i !== index);
}

// 然后打印数组，结果为 ['apple', 'orange', 'grape']。
console.log(this.fruits);

这里使用indexOf()方法来获取要删除元素的索引，然后再使用filter()方法过滤掉该元素。

这种方法也非常简单易懂，如果您不想使用原生方法splice()的话，这是一种不错的选择。

以上两种方法均可以完整地演示Vuejs从数组中删除元素的过程。