<template> <div> <transition> <div @click="decreaseCart" v-show="food.count"> <span></span> </div> </transition> <div v-show="food.count">{{food.count}}</div> <div @click="increaseCart"> <i></i> </div> </div> </template>
<script> import Vue from 'vue' export default { props:{ food:{ type:Object } }, methods:{ decreaseCart(){ this.food.count--;//this指向了vue实例 }, increaseCart(){ if(!this.food.count){ Vue.set(this.food,'count',1); }else{ this.food.count++; } } } }; </script>
完善购物车内的数量统计
<template> <div :class="{'highligh':totalCount>0}"> <div> <div> <div :class="{'highligh':totalCount>0}"> <span :class="{'highligh':totalCount>0}"></span> <i v-show="totalCount">{{totalCount}}</i> </div> <div> <p v-show="totalPrice">￥{{totalPrice}}</p> <p :class="{'highligh':totalCount>0}">另需{{shipping_fee_tip}}</p> </div> </div> <div :class="{'highligh':totalCount>0}">{{payStr}}</div> </div> </div> </template> <script> // 导入BScroll import BScroll from "better-scroll"; export default { props: { min_price_tip: { type: String, default: "" }, shipping_fee_tip: { type: String, default: "" }, selectFoods: { type: Array, default() { return [ /* { min_price: 10, count: 3 }, { min_price: 7, count: 1 } */ ]; } } }, computed: { // 总个数 totalCount() { let num = 0; this.selectFoods.forEach(food => { num += food.count; }); return num; }, // 总金额 totalPrice() { let total = 0; this.selectFoods.forEach(food => { total += food.min_price * food.count; }); return total; }, // 结算按钮显示 payStr() { if (this.totalCount > 0) { return "去结算"; } else { return this.min_price_tip; } } }, components: { BScroll } }; </script>
现在商品分类菜单的数量提示就完成了。
总结
以上所述是小编给大家介绍的Vue实现商品分类菜单数量提示功能,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！
您可能感兴趣的文章: