vuejs删除数组某一项|极客教程

vuejs删除数组某一项

在Vue.js中，我们经常需要操作数据，包括对数组进行增删改操作。当我们需要删除数组中的某一项时，可以使用Vue.js提供的方法来实现。

使用`splice`方法删除数组中的某一项

splice方法是JavaScript中用来从数组中删除元素的方法之一。在Vue.js中，我们可以直接使用splice方法来删除数组中的某一项。

下面是一个示例代码，演示了如何使用splice方法删除数组中指定下标的元素：

// 创建一个Vue实例
const vm = new Vue({
  data: {
    items: ['Apple', 'Banana', 'Orange', 'Strawberry']
  },
  methods: {
    deleteItem(index) {
      this.items.splice(index, 1);
    }
  }
});

// 删除数组中的第二项
vm.deleteItem(1);

// 打印删除后的数组
console.log(vm.items); // ['Apple', 'Orange', 'Strawberry']

在上面的示例中，我们定义了一个Vue实例，包含一个数组items，然后定义了一个deleteItem方法来删除数组中指定下标的元素。通过调用deleteItem方法，并传入要删除的元素的下标，就可以删除数组中对应下标的元素。

使用`filter`方法删除数组中的某一项

除了使用splice方法来删除数组中的某一项外，我们还可以使用filter方法结合indexOf方法来删除数组中指定元素。

下面是一个示例代码，演示了如何使用filter方法删除数组中指定元素：

// 创建一个Vue实例
const vm = new Vue({
  data: {
    items: ['Apple', 'Banana', 'Orange', 'Strawberry']
  },
  methods: {
    deleteItem(item) {
      this.items = this.items.filter(i => i !== item);
    }
  }
});

// 删除数组中的'Banana'
vm.deleteItem('Banana');

// 打印删除后的数组
console.log(vm.items); // ['Apple', 'Orange', 'Strawberry']

在上面的示例中，我们同样定义了一个Vue实例，包含一个数组items，然后定义了一个deleteItem方法来删除数组中指定元素。通过调用deleteItem方法，并传入要删除的元素，就可以删除数组中对应的元素。