商城之购物车商品添加和结算的小效果----基于Vue.js-阿里云开发者社区

开发者社区> 开发与运维> 正文

商城之购物车商品添加和结算的小效果----基于Vue.js

简介:

【页面比较丑请忽略,完全没有审美感】

1.页面布局方式:

screenshot

2.数据:

screenshot

3.经过数据渲染之后,页面展示:

screenshot

4.逻辑代码:

首先我们考虑到:当我们点击任何一个【+】,那么totalNum都是需要加1的,反之点击【-】时,

totalNum减一;【其中页面的加减号之间的0是通过数据渲染出来的】接下来,我们就需要解决这个问题:直接上代码:【方法中参数的重要性:因为数据都是从后台拿过来的,所以我们可以用一个变量拿过来,因为我没做ajax,所以直接造了一些数据;通过index参数,我们可以知道点击了相对应的一条数据,对其当前的一条数据做交互screenshot

screenshot

接下来便是:消费的展示:这个代码很简单:和上图做下对比就知道了:

screenshot

5.最终效果展示:

screenshot

转载或引用本网版权所有之内容须注明“转自(或引自)云栖社区”字样,并标明本网网址yq.aliyun.com

谢谢大家,获取更多精华技术IT资讯,请持续关注云栖社区“达摩老祖”and"码上有钱"

需要购买阿里云各种产品,点击文字链领取阿里云通用打折劵

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

其他文章