Vue删除数组的几种方法

一、从Vue数组中删除某个元素

Vue数组中删除某个元素是比较简单的，可以用splice()方法实现，但需注意每次删除后都需要实时更新Vue视图。

<template>
  <div>
    <p v-for="(item, index) in arr" :key="index">
      {{ item }}
      <button @click="removeItem(index)">删除</button>
    </p>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        arr: [1, 2, 3, 4, 5, 6]
      }
    },
    methods: {
      removeItem(index) {
        this.arr.splice(index, 1);
      }
    }
  }
</script>

二、Vue删除数组一项并更新

在Vue中通过删除数组一项，需要及时更新视图，可以使用Vue.$set()方法实现。实现过程为：先将要删除的元素下标取出来，然后利用splice删除，最后使用Vue.$set更新Vue视图。

<template>
  <div>
    <p v-for="(item, index) in arr" :key="index">
      {{item.name}} - {{item.age}}
      <button @click="removeItem(index)">删除</button>
    </p>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        arr: [{name: 'Tom', age: 18}, {name: 'Jerry', age: 20}, {name: 'Lucky', age: 22}]
      }
    },
    methods: {
      removeItem(index) {
        this.arr.splice(index, 1);
        this.arr.forEach((item, i) => {
          this.$set(this.arr, i, item);
        });
      }
    }
  }
</script>

三、Vue删除数组中的某个对象

假设数组中为对象数组，则删除某个元素，则需要利用索引来删除对象，具体实现方法与删除数组元素相同。

<template>
  <div>
    <p v-for="(item, index) in arr" :key="index">
      {{item.name}} - {{item.age}}
      <button @click="removeItem(index)">删除</button>
    </p>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        arr: [{name: 'Tom', age: 18}, {name: 'Jerry', age: 20}, {name: 'Lucky', age: 22}]
      }
    },
    methods: {
      removeItem(index) {
        this.arr.splice(index, 1);
        this.arr.forEach((item, i) => {
          this.$set(this.arr, i, item);
        });
      }
    }
  }
</script>

四、Vue删除数组元素的方法

除了splice()方法以外，还有pop()、shift()、 unshift()、slice()等方法可以删除数组元素，需要根据具体业务需求选择。

// 使用pop()删除数组尾部元素
arr.pop();
// 使用shift()删除数组头部元素
arr.shift();
// 使用unshift()在数组头部插入一项
arr.unshift(newElement);
// 使用slice()截取指定区间内的元素
arr.slice(start, end);

五、Vue删除数组中的一条数据

Vue中可以用filter()方法删除数组中符合指定条件的元素，删除之后通过$set()方法更新视图。

<template>
  <div>
    <p v-for="(item, index) in arr" :key="index">
      {{item.name}} - {{item.age}}
      <button @click="removeItem(item)">删除</button>
    </p>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        arr: [{name: 'Tom', age: 18}, {name: 'Jerry', age: 20}, {name: 'Lucky', age: 22}]
      }
    },
    methods: {
      removeItem(item) {
        this.arr = this.arr.filter(elem => elem !== item);
        this.arr.forEach((item, i) => {
          this.$set(this.arr, i, item);
        });
      }
    }
  }
</script>

六、Vue删除数组中的元素

除了使用splice()方法以外，还可以使用delete运算符或者Vue.delete()方法删除数组中的元素。

// 使用delete运算符
delete arr[index];

// 使用Vue.delete()方法
Vue.delete(arr, index);

七、Vue删除数组某一项

除了直接修改数组以外，还可以通过新建一个数组，将不需要删除的元素添加进去，实现保留指定元素，删除其他元素的效果。

<template>
  <div>
    <p v-for="(item, index) in newarr" :key="index">
      {{item}}
    </p>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        arr: [1, 2, 3, 4, 5, 6],
        index: 2,
        newarr: []
      }
    },
    mounted() {
      this.newarr = this.arr.filter((item, index) => index !== this.index);
    }
  }
</script>

八、Vue删除数组移除指定元素

与上述保留指定元素的方法相反，此处需要将指定元素以外的元素保留下来。

<template>
  <div>
    <p v-for="(item, index) in newarr" :key="index">
      {{item}}
    </p>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        arr: [1, 2, 3, 4, 5, 6],
        index: 2,
        newarr: []
      }
    },
    mounted() {
      this.newarr = this.arr.filter((item, index) => index === this.index);
    }
  }
</script>

九、Vue删除数组空白元素

空白元素指的是数组中的空值、null、undefined等。可以使用filter()方法将数组中的空白元素过滤出来。

<template>
  <div>
    <p v-for="(item, index) in newarr" :key="index">
      {{item}}
    </p>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        arr: [1, null, 3, undefined, 5, '', 7],
        newarr: []
      }
    },
    mounted() {
      this.newarr = this.arr.filter(item => item !== null && item !== undefined && item !== '');
    }
  }
</script>

总结

Vue中删除数组元素的方法有很多种，主要包括splice()方法、pop()、shift()、unshift()、slice()等，需要根据具体业务需求来选择。在删除元素后，一定要注意即时更新Vue视图。