vue仿美团饿了么，实现购物车功能

未点击前，结算按钮未灰色，不能点击状态，

点击加号后，实现购物车图表高亮，结算按钮高亮，价格计算，弹出减号按钮。

先说点击的功能，点击加号加1，data中定义变量tot。给按钮绑定事件addShop事件@click="addShop(key)"
这里传入参数key，是因为如果不判断当前点击的对象，会导致所有的类别都会加1，所以要传入参数，当然数据是需要获取，v-for渲染的，（写死的div就不用传参了）。
实现每个食物类别，是在数据中写好了当前食物的数量，初始为0，点击，则当前点击的对象数据currentNum+1，且当前减号的状态showStatus 变为显示。

addShop(key){this.tot++;this.shopList[key].currentNum++;if(this.shopList[key].currentNum > 0){this.shopList[key].showStatus = true;}
}

同理完成减法。
价格的计算，当前数据发生了改变，只需要把当前的currentNum乘它的价格averagePrice。
必须要用计算属性，如果不是计算属性，会导致每次循环，计算的上一次循环的价格加上第二次循环的，计算数值会错。

totalMoney(){let totalMoney = 0;for(var i=0;i<this.shopList.length;i++){if(this.shopList[i].currentNum>0){totalMoney = totalMoney + Number((this.shopList[i].currentNum)*(this.shopList[i].averagePrice));}}return totalMoney;},

高亮显示，主要绑定class或者属性就能实现。

vue仿美团饿了么，实现购物车功能相关推荐

vue仿美团饿了么--底部导航公共组件
底部导航栏,是每一个页面都需要用的,所以用的公共组件,在app.vue中引入 import common from "./components/footer/common.vue" ...
vue仿美团饿了么，弹窗提示登录
vue实现点击商店购物,没有登录时,提示登录. 在router.js定义好哪些页面需要登录才能进行 {path: '/shop/order',name: 'order',component: orde ...
用vue仿美团APP
vue仿美团APP 这几天上班也不是很忙,就想着用vue做一个APP,感觉美团这个APP里面的功能比较齐全,就仿美团做了一个,但是现在我也没有充足的时间去做,只能有时间做一点,现在前面的几个大页面都做 ...
视频教程-Web前端开发仿美团/饿了吗移动App之高德地图接口对接案例-JavaScript
Web前端开发仿美团/饿了吗移动App之高德地图接口对接案例互联网编程行业10年开发和授课经验曾任太极集团,外资企业等一线互联网python高级开发工程师现任聚焦计算机技术有限公司项目组担任架构 ...
仿美团饿了么选菜界面实现
本文是在未来大神zxt头像狂魔的基础上稍作修改,大家在看这个博客之前可以出门右拐至这里: 传送门-----> 点击打开链接好了,我们首先看一下两个app的界面长什么样子: 我们看到两个界面都很 ...
uniapp 仿美团饿了么城市列表+顶部搜索
直接上图片效果图如下 <template><view class="introScroll"><view class="topView&q ...
2020用vue实现仿美团导航切换功能和淘宝购物车功能，实现默认第一个导航显示效果?
总结:之前一直未写过同时实现跳转当前页面和跳转新页面的项目,要么是当前,要么是新页面,今天更新一个两个同时实现的项目. :相信很多人都遇到过router-link通过to跳转页面有时候会不显示内容的b ...
vue仿饿了么点餐手机端
vue仿饿了么点餐手机端模板,包括评论,商品,商家模块,添加商品到购物车,左侧分类计数功能,右侧滑动时分类有上推功能,小球飞入购物车功能.
Vue仿饿了么app项目总结
前言这是我的第一个基于Vue项目的作品,目的是把之前的前端知识累积加上目前流行的前端框架,以项目的形式展示出来. 大家在学习Vue的时候,可以将此项目作为学习Vue框架的一个模板 Vue仿饿了么ap ...

vue仿美团饿了么，实现购物车功能

vue仿美团饿了么，实现购物车功能相关推荐

最新文章

热门文章