这篇文章主要介绍了Vue实战―商品分类菜单数量提示功能，本文通过项目实战给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
如上所示，这篇我们将商品分类菜单显示数量的提示完善，是软件更加易于使用。
好先让我回顾一下上节课的内容，Goods组件，数量提示功能最终需要在Goods组件内显示。
-
{{item.name}}
-
{{food.name}}
{{food.description}}
{{food.month_saled_content}}{{food.praise_content}}￥{{food.min_price}}/{{food.unit}}
-
注意methods方法中的calculateCount函数实现计算个数，数量来自于增减组件内Cartcontrol。
calculateCount(spus) { console.log(spus) let count = 0; spus.forEach(food => { if (food.count > 0) { count += food.count; } }); return count; },
以上是spus数据
Cartcontrol组件控制商品增减
通过组件Cartcontrol接受了来自父组件的传值，并且我们在组件内添加商品的增减功能。
{{food.count}}
完善购物车内的数量统计
0}"> 0}"> 0}">{{totalCount}}￥{{totalPrice}}
0}">另需{{shipping_fee_tip}}
0}">{{payStr}}
现在商品分类菜单的数量提示就完成了。
总结
以上所述是小编给大家介绍的Vue实现商品分类菜单数量提示功能,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对本站网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！
以上就是Vue实现商品分类菜单数量提示功能的详细内容，更多请关注本站其它相关文章！
