Vue 求两数组之间的差值

1、方法----计算属性

<!--
 * @Descripttion: 数组差值
 * @version: 0.0.1
 * @Author: PengShuai
 * @Date: 2022-08-03 15:22:28
 * @LastEditors: PengShuai
 * @LastEditTime: 2022-08-03 15:22:28
-->

  computed: {
    DemoList() {
      var newArray = this.allList.filter(
        (item) => !this.selectList.some((e) => e.a === item.a)
      )
      return newArray
    }
  }

2、全部代码

<!--
 * @Descripttion: 数组差值
 * @version: 0.0.1
 * @Author: PengShuai
 * @Date: 2022-08-03 15:22:28
 * @LastEditors: PengShuai
 * @LastEditTime: 2022-08-03 15:22:28
-->

<template>
  <div class="Home">
    <div>求两个数组之间的差值</div>
    <!-- 全部数据 -->
    <p>全部数据</p>
    {{ allList }}
    <br />
    <br />
    <br />
    <!-- 选择的数据 -->
    <p>选择的数据</p>
    {{ selectList }}
    <br />
    <br />
    <br />
    <!-- 所剩数据 -->
    <p>结果-所剩数据</p>
    {{ DemoList }}
    <br />
    <br />
    <br />
  </div>
</template>

<script>
export default {
  name: 'HomePage',
  data() {
    return {
      selectList: [
        {
          a: '1',
          b: 'a',
        },
        {
          a: '2',
          b: 'b',
        },
        {
          a: '3',
          b: 'c',
        },
      ],
      allList: [
        {
          a: '1',
          b: 'a',
        },
        {
          a: '2',
          b: 'b',
        },
        {
          a: '3',
          b: 'c',
        },
        {
          a: '4',
          b: 'd',
        },
        {
          a: '5',
          b: 'f',
        },
      ],
    }
  },
  computed: {
    DemoList() {
      var newArray = this.allList.filter(
        (item) => !this.selectList.some((e) => e.a === item.a)
      )
      return newArray
    },
  },
}
</script>

<style lang="less" scoped>
.Home {
  width: 800px;
  margin: 50px auto;
  div {
    text-align: center;
    font-weight: bold;
    font-size: 20px;
  }
  p {
    margin-bottom: 10px;
  }
}
</style>

3、实例