vue-11-购物车案例（2）-复习

接着前面的案例

<div id="box">
    <ul>

      <li>
        <div>
          <input type="checkbox" v-model="isAllChecked" @change="handleAllChange">
          <span>全选/全不选</span>
        </div>
      </li>

      <li v-for="(item,index ) in datalist" :key="item.id">

        <div>
          <input @change="handleItemChange" type="checkbox" v-model="checkList" :value="item">
        </div>

        <div>
          <img :src="item.poster" alt="">
        </div>

        <div>
          <div>{{item.title}}</div>
          <div style="color: red;">价格：{{item.price}}</div>
        </div>

        <div>
          <button @click="item.number--" :disabled="item.number===1">-</button>
          {{item.number}}
          <button @click="item.number++" :disabled="item.number===item.limit">+</button>
        </div>

        <div>
          <button @click="handleDel(index,item.id)">删除</button>
        </div>

      </li>

      <li>
        <div>总金额：{{sum()}}</div>
      </li>
    </ul>

  </div>

 <script>
    var obj = {
      data() {
        return {
          // 勾选的商品列表
          checkList: [],
          isAllChecked: false,

          datalist: [{
            id: 1,
            title: "商品1",
            price: 10,
            number: 1,
            poster:
              "https://p0.meituan.net/movie/dc2fed6001e809e4553f90cc6fad9a59245170.jpg@1l_1e_1c_128w_180h",
            limit: 5,
          },
       // 省略...
          ]
        }
      },
      methods: {
        // 总金额
        sum() {
         
          return this.checkList.reduce((total, item) => total + item.price * item.number, 0)
        },

        // 删除按钮
        handleDel(index, id) {
          console.log(index);
          this.datalist.splice(index, 1)
          // 同步更新checkList
          this.checkList = this.checkList.filter((item) => item.id !== id)

          // 同步更新全选
          this.handleItemChange()
        },

        // 是否全选
        handleAllChange() {
          // console.log(this.isAllChecked);
          // 三目运算符
          this.checkList = this.isAllChecked ? this.datalist : []

        },
        
        handleItemChange() {
          if (this.datalist.length === 0) {
            this.isAllChecked = false
            return
          }
          this.isAllChecked = this.checkList.length === this.datalist.length
        }


      }
    }

    var app = Vue.createApp(obj).mount("#box")
  </script>

运行结果：

未完待续...