Vue实现删除数组中指定元素的方式

一、使用splice方法进行删除

Vue中的数组对象提供了很多常用的方法，其中splice方法可以用来删除指定位置的元素，具体使用方式如下：

let arr = ['a', 'b', 'c', 'd'];
arr.splice(1, 1); //删除数组中索引为1的元素，即'b'
console.log(arr); //输出['a', 'c', 'd']


我们可以在Vue的computed属性中使用这个方法去删除数组中指定的元素。例如：



在上述代码中，我们首先定义了一个arr数组，并将其转化为computed属性arrComputed。接着，在v-for中遍历arrComputed并渲染到页面中。在每个li元素后面添加了一个删除按钮，并通过@click事件将对应的index传递给了removeItem方法，该方法使用splice方法将对应位置的元素删除。这样每次点击按钮时，都会删除该元素，并重新计算arrComputed的值，Vue会自动更新视图。

二、使用filter方法进行删除
除了splice方法，我们还可以使用filter方法来删除数组中的指定元素。与splice不同的是，filter不会改变原始数组，而是会返回一个新的数组，该数组不包含要删除的元素。具体使用方式如下：
let arr = ['a', 'b', 'c', 'd'];
arr = arr.filter((item, index) => index !== 1);
console.log(arr); //输出['a', 'c', 'd']

同样地，在Vue中可以使用computed属性与filter方法来实现删除指定元素的功能，例如：



在上述代码中，我们利用computed属性中的filter方法筛选出不含c元素的数组。当用户点击删除按钮时，仍然通过splice方法删除对应位置的元素，Vue会自动重新计算arrComputed的值并更新页面。

三、使用slice方法进行删除
除去上述方法外，我们还可以使用slice方法来删除数组中的指定元素，具体使用方式如下：
let arr = ['a', 'b', 'c', 'd'];
let newArr = arr.slice(0, 1).concat(arr.slice(2));
console.log(newArr); //输出['a', 'c', 'd']

上述代码中，我们首先使用slice方法取出要删除的元素之前的所有元素并合并到一个新数组中，接着取出要删除元素之后的所有元素并继续合并，从而获得一个新的不包含要删除元素的数组。
同样地，在Vue中也可以使用computed属性与slice方法实现删除指定元素的功能，例如：



在上述代码中，我们定义了一个要删除的元素为c，并在computed属性中使用slice方法取出该元素之前的所有元素和之后的所有元素并合并，从而获得一个新的不包含元素c的数组。当用户点击删除按钮时，仍然通过splice方法删除对应位置的元素，Vue会自动重新计算arrComputed的值并更新页面。