Vue 简单实例 购物车4 - 全选和反选功能

1、查看代码发现选中全选是由 check 样式控制的，所以我们要添加一个变量来控制是否全选：

<span :class="['checkbox-btn', 'item-check-btn', allCheck ? 'check' : '']">

<script>
export default {
  data() {
    return {
      allCheck: false, // 是否全选
    }
  },
}
</script>

2、给全选添加点击事件：

<a href="javascipt:;" @click="getAllChecked">
  <span :class="['checkbox-btn', 'item-check-btn', allCheck ? 'check' : '']">

<script>
export default {
  methods: {
    // 点击全选和反选
    getAllChecked() {
      let flag = !this.allCheck
    }
  }
}
</script>

我们发现每个商品都选中了才会变为全选，反之有一个商品没有选中，则不是全选状态。

3、这里我们可以用计算属性来定义 allCheck ：

// 计算属性
computed: {
    allCheck() {
      // every 当数组中每一项都返回 true，整体才返回 true；有一项返回 false，整体就返回 false
      return this.cartList.every(item => {
        return item.checked
      })
    }
}

注意：上面 data 里的 allCheck 变量记得注释掉，改用计算属性。

4、继续 getAllChecked() 方法：

// 点击全选和反选
getAllChecked() {
      let flag = !this.allCheck
      this.cartList.forEach(item => {
        item.checked = flag
      })
},

这时点击全选就可以全部选中商品，反之则全部没选中。

5、同时选中商品时计算总价

同样定义计算属性，计算选中商品的价格总计：

<div class="item-total">
     总价:
     <span class="total-price">{{ totalPrice | curreney }}</span>
</div>

<script>
export default {
  // 计算属性
  computed: {
    // 总价
    totalPrice() {
      let money = 0
      this.cartList.forEach(item => {
        if (item.checked) {
          money += item.productNum * item.productPrice
        }
      })
      return money
    }
  }
}
</script>

此时选中商品或改变商品数量，对应的总价随之改变。