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>

这时点击 - 或者 + ，数量进行加减，价格也会随之跟着而变化。