Vue 实现购物车全选、反选、自动计算已选中商品金额

<template>
  <main>
    <div class="region">
      <ul class="optionList">
        <li v-for="(item, key) in tableData" :key="key" class="goodsInfo">
          <input type="checkbox" v-model="item.checkSingleValue" />
          <span>{{ item.name }}</span>
          <span>{{ item.price }} ￥</span>
        </li>
      </ul>
      <div class="totalMoneyBox regionOperation">
        <span>合计：</span> {{ totalMoney }} ￥
      </div>

      <div class="regionOperation">
        <div
          class="operationList"
          :class="{ selectNoneoperationList: checkAllValue }"
        >
          <div class="selectAllContainer">
            <span>全选：</span>
            <input type="checkbox" v-model="checkAllValue" />
          </div>
          <button class="reverseSelectionButton" @click="ReverseSelection">
            反选
          </button>
        </div>
      </div>
    </div>
  </main>
</template>

<script>
export default {
  data () {
    return {
      tableData: [
        {
          name: '可乐',
          price: 3,
          checkSingleValue: false
        },
        {
          name: '牛奶',
          price: 3,

          checkSingleValue: false
        },

        {
          name: '干脆面',
          price: 0.5,

          checkSingleValue: false
        },
        {
          name: '面包片',
          price: 5,

          checkSingleValue: false
        },
        {
          name: '方便面',
          price: 3,

          checkSingleValue: false
        }
      ]
    }
  },
  computed: {
    checkAllValue: {
      set (value) {
        // 作用：获取全选框的状态(true/false)，然后修改选项框状态
        this.tableData.forEach(tableDataAllSelect => {
          tableDataAllSelect.checkSingleValue = value
        })
      },
      get () {
        // every() 查找数组里不符合条件的数据，如果有查找到直接返回 false
        return this.tableData.every(
          tableDataAllSelect => tableDataAllSelect.checkSingleValue === true
        )
      }
    },
    totalMoney () {
      var dealArr = this.tableData.filter(res => res.checkSingleValue)
      return dealArr.reduce((prev, cur) => {
        return prev + cur.price
      }, 0)
    }
  },
  methods: {
    ReverseSelection () {
      this.tableData.forEach(tableDataAllSelect => {
        tableDataAllSelect.checkSingleValue = !tableDataAllSelect.checkSingleValue
      })
    }
  }
}
</script>

<style lang="scss">
main {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #151617;

  .region {
    width: 500px;
    padding: 30px;
    border-radius: 5px;
    background-color: #2a2b2c;
    border: 1px solid #6a7b8c;
    box-shadow: 0px 0px 19px -5px rgb(0 0 0 / 25%);
    -webkit-box-shadow: 0px 0px 19px -5px rgb(0 0 0 / 25%);

    .regionOperation,
    .optionList {
      width: 100%;
      padding: 10px;
      border-radius: 5px;
      box-sizing: border-box;
      background-color: #151617;
      color: white;
    }

    .regionOperation {
      height: 46px;

      .operationList {
        width: 200px;
        height: 100%;
        margin: 0px auto;
        display: flex;
        align-items: center;
        justify-content: center;

        .selectAllContainer,
        .reverseSelectionButton {
          color: #ffffff;
          font-weight: bold;
        }
        .reverseSelectionButton {
          background-color: #52ec52 !important;
          border: none !important;
        }

        .selectAllContainer {
          width: 100px;
          margin-right: 5px;
          font-size: 22px;
          display: flex;
          align-items: center;
          justify-content: center;
          background-color: #151617;

          input[type='checkbox'] {
            width: 25px;
            height: 25px;
          }
        }

        .reverseSelectionButton {
          outline: none;
          font-size: 13px;
          cursor: pointer;
          margin-left: 5px;
          padding: 6px 18px;
          border-radius: 5px;
          transition: 0.3s ease;
          border: 2px solid #008cd6;
          background-color: #008cd6;
        }
      }
    }

    .optionList {
      margin-top: 30px;

      li {
        width: 100%;
        padding: 7px;
        display: flex;
        border-radius: 3px;
        align-items: center;
        box-sizing: border-box;
        background-color: #2a2b2c;

        input[type='checkbox'] {
          width: 16px;
          height: 16px;
        }

        span {
          margin-left: 5px;
          font-weight: bold;
        }
      }

      li + li {
        margin-top: 10px;
      }
    }
  }
}
.goodsInfo {
  width: 100%;
  display: flex;
  justify-content: space-between;
}

.totalMoneyBox {
  display: flex;
  justify-content: space-between;
  line-height: 23px;
  margin-bottom: 10px;
}
</style>