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

前端  /  管理员 发布于 5年前   1255

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

好先让我回顾一下上节课的内容，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实现商品分类菜单数量提示功能,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

您可能感兴趣的文章:

• vue分类筛选filter方法简单实例
• 详解Vue2 无限级分类(添加,删除,修改)
• vue 右键菜单插件 简单、可扩展、样式自定义的右键菜单
• vue二级菜单导航点击选中事件的方法
• vue.js+element-ui动态配置菜单的实例
• vue左侧菜单,树形图递归实现代码
• Vue 菜单栏点击切换单个class(高亮)的方法
• vue addRoutes实现动态权限路由菜单的示例