购物车全选

  购物车全选以及反选

  购物车总件数计算

  购物车总价计算

html：

    <div id="app" v-cloak>
      <ul>
        <li class="clearFix" v-for="(item,index) in list" :key="item.key">
          <input
            type="checkbox"
            class="f1 cheInput"
            :checked="item.checked"
            @click="item.checked=!item.checked"
          />
          <img :src="item.srcImg" alt="" class="f1 active" />
          <div class="priceFrom .clearFix f1">
            <span class="f1" @click="next(index)" :class="{cur:item.p<=0}"
              >-</span
            ><input type="text" class="f1" v-model="item.p" /><span
              class="f1"
              @click="add(index)"
              >+</span
            >
          </div>
          <span class="f1 bg" @click="remove(index)">删除</span>
        </li>
      </ul>
      <div class="foot">
        <label for="che">
          <input
            type="checkbox"
            id="che"
            :checked="allCheck"
            @click="allClick"
          />&nbsp;&nbsp;全选
        </label>
        <div class="foot-num">
          已选商品:<span style="margin: 0 5px">{{pie}}</span> 总价:<span
            style="margin: 0 5px"
            >{{total}}</span
          >元
        </div>
      </div>
    </div>

css：

* {
        margin: 0;
        padding: 0;
        list-style: none;
      }
      body {
        background: #eee;
      }
      #app {
        margin: 100px auto;
        background: #fff;
        width: 600px;
      }
      ul li {
        line-height: 100px;
        margin-top: 10px;
        margin-left: 20px;
      }
      .cheInput {
        margin-top: 50px;
      }
      .fl {
        float: left;
      }
      .active {
        border: 1px solid #5f5f5f;
      }
      img {
        width: 100px;
        height: 100px;
        vertical-align: middle;
        padding: 3px;
        border-radius: 5px;
        border: 1px solid #fff;
        margin: 0px 10px;
      }
      .clearFix {
        display: block;
        content: "";
        clear: both;
      }
      .priceFrom {
        display: inline-block;
        border-radius: 5px;
        margin: 40px 10px 0px 90px;
      }
      .priceFrom span {
        display: inline-block;
        width: 20px;
        height: 20px;
        background: #5f5f5f;
        color: #fff;
        text-align: center;
        font-size: 16px;
        line-height: 16px;
        cursor: pointer;
      }
      .cur {
        pointer-events: none;
      }
      .priceFrom input {
        width: 40px;
        height: 18px;
        border: none;
        padding: 0 15px;
        border: 1px solid #5f5f5f;
        text-align: center;
      }
      .bg {
        color: red;
        margin-left: 15px;
        cursor: pointer;
      }
      .foot {
        padding: 20px;
      }
      .foot-num {
        display: inline-block;
      }
      .foot-num span {
        color: red;
      }

javascript：

<script src="../index.vue/vue.js"></script>
<script>
  const vm = new Vue({
    el: "#app",
    data() {
      return {
        list: [
          {
            id: 1,
            univalence: 2, //单价
            srcImg: "img/t1.jpg",
            p: 1,//数量
            checked: true,
          },
          {
            id: 2,
            univalence: 3,
            srcImg: "img/t2.jpg",
            p: 1,
            checked: true,
          },
          {
            id: 3,
            univalence: 4,
            srcImg: "img/t3.jpg",
            p: 1,
            checked: true,
          },
          {
            id: 4,
            univalence: 5,
            srcImg: "img/t4.jpg",
            p: 1,
            checked: true,
          },
          {
            id: 5,
            univalence: 6,
            srcImg: "img/t5.jpg",
            p: 1,
            checked: true,
          },
        ],
      };
    },
    computed: {
      // 计算总价
      total() {
        let total = 0;
        this.list.forEach((v) => {
          total += v.univalence * v.p;
        });
        return total;
      },
      // 计算总件数
      pie() {
        let pie = 0;
        this.list.forEach((i) => {
          pie += i.p;
        });
        return pie;
      },
      
      allCheck() {
        let count = 0;
        this.list.forEach((item, index) => {
          count += item.checked ? 1 : 0;
        });
        return count == this.list.length;
      },
    },
    methods: {
      add(index) {
        this.list[index].p++;
      },
      next(index) {
        this.list[index].p--;
      },
      remove(index) {
        return this.list.splice(index, 1);
      },
      allClick() {
        var checked;
        if (this.allCheck) {
          checked = false;
        } else {
          checked = true;
        }
        this.list.forEach((item, index) => {
          item.checked = checked;
        });
      },
    },
  });
</script>