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>
这时点击 - 或者 + ,数量进行加减,价格也会随之跟着而变化。