vue----Shopcar 大小选-加减-总价-总件数-功能总结

vue----Shopcar 大小选-加减-总价-总件数-功能总结

---

一:大小选

二:计算总价和总件数

三:商品数量的加减功能

1. 大小选**

<input
        type="checkbox"
        class="custom-control-input"
        id="footerCheck"
        v-model="ck"//此处用v-model
      />



 // 小选与大选
  props: ["list"],
  computed: {
    ck: {
      //大选决定小选
      set(val) {
        this.list.forEach((e) => (e.goods_state = val));
      },
      // 小选决定大选
      get() {
        return this.list.every((item) => item.goods_state == true);
      },
    },
  },         

二:计算总价和总件数

 
    computed: {
    // 计算总价 
    allprice() {
      let sum = 0;
      this.list.forEach((item) => {
        if (item.goods_state == true) {
          sum += item.goods_price * item.goods_count;
        }
      });
      return sum;
    },
    // 计算总件数, reduce((sum,item)=>{},0)用法
    allcount() {
      return this.list.reduce((sum, item) => {
        if (item.goods_state == true) {
          sum += item.goods_count;
        }
        return sum;
      }, 0);
    },
  }

三:商品数量的加减功能

<div class="my-counter">
  //减功能
            <button
              type="button"
              class="btn btn-light"
              @click="item.goods_count > 1 && item.goods_count--"//减功能
            >
              -
            </button>
            <input
              type="number"
              class="form-control inp"
              v-model="item.goods_count"
              @change="change" //优化数量不能为负
            />
   //加功能
            <button
              type="button"
              class="btn btn-light"
              @click="item.goods_count++" //加功能
            >
              +
            </button>
</div>

//优化数量不能为空
<script>
export default {
  props: ["item"],
  methods: {
    change() {
      if (this.item.goods_count < 1) {
        this.item.goods_count = 1;
      }
    },
  },
};
</script>