Vue实现商品分类菜单数量提示功能

如上所示，这篇我们将商品分类菜单显示数量的提示完善，是软件更加易于使用。

好先让我回顾一下上节课的内容，Goods组件，数量提示功能最终需要在Goods组件内显示。

注意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接受了来自父组件的传值，并且我们在组件内添加商品的增减功能。

完善购物车内的数量统计

现在商品分类菜单的数量提示就完成了。

总结

以上所述是小编给大家介绍的Vue实现商品分类菜单数量提示功能,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对考高分网网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！