Vue 簡單實例 購物車2 - 修改商品數量和價格

通過過濾器，修改商品數量，價格隨之跟着變化。

1、先把 + - 添加點擊事件：

<a class="input-sub" @click="editCart('minus', item)">-</a>
<a class="input-add" @click="editCart('add', item)">+</a>

<script>
export default {
  methods: {
    // 加減修改商品數量及狀態
    editCart(type, item) {
      console.log(type, item)
      if (type === 'add') {
        item.productNum++
      } else if (type === 'minus') {
        if (item.productNum == 0) return
        item.productNum--
      } else {
        item.checked = !item.checked
      }
    }
  }
}
</script>

2、再給選擇框添加點擊事件

<a href="javascipt:;"
                      :class="[item.checked ? 'checked' : '', 'checkbox-btn', 'item-check-btn']"
                      @click="editCart('checked', item)">

這時點擊前面的圓框會實現勾選狀態，反之為沒勾選狀態。

3、定義過濾器：

// 定義過濾器
  filters: {
    curreney(value) {
      if (!value) return 0.0
      return '￥' + value.toFixed(2) + '元'
    }
  },

4、在價格里使用：

<div class="item-price-total">
    {{ (item.productPrice * item.productNum) | curreney }}
</div>

這時點擊 - 或者 + ，數量進行加減，價格也會隨之跟着而變化。