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>

此時選中商品或改變商品數量，對應的總價隨之改變。