1. 云栖社区>
  2. 博客列表>
  3. 正文

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

云栖技术 2017-07-25 23:29:03 浏览675 评论0

云栖社区 阿里云 HTTPS 布局 js aliyun ScreenShot

摘要: 【页面比较丑请忽略,完全没有审美感】 1.页面布局方式: 2.数据: 3.经过数据渲染之后,页面展示: 4.逻辑代码: 首先我们考虑到:当我们点击任何一个【+】,那么totalNum都是需要加1的,反之点击【-】时, totalNum减一;【其中页面的加减号之间的0是通过数据渲染出来的】接下...

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

1.页面布局方式:

screenshot

2.数据:

screenshot

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

screenshot

4.逻辑代码:

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

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

screenshot

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

screenshot

5.最终效果展示:

screenshot

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

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

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

版权声明:本文内容由互联网用户自发贡献,本社区不拥有所有权,也不承担相关法律责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件至:yqgroup@service.aliyun.com 进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容。

用云栖社区APP,舒服~

【云栖快讯】红轴机械键盘、无线鼠标等753个大奖,先到先得,云栖社区首届博主招募大赛9月21日-11月20日限时开启,为你再添一个高端技术交流场所  详情请点击

网友评论

关注
云栖技术
社区爱好者,专为云栖社区服务!
43篇文章|17关注

一站式提供企业即时通讯、销售管理、协同办公。 更多>

基于深度学习技术及阿里巴巴多年的海量数据支撑, 提供多样化的内容识别服务,能有效帮助用户降低违规风险。其产品包括... 更多>

凝聚阿里巴巴多年来在无线业务安全防御的成功经验和技术成果,并面向开发者和企业提供安全扫描、应用加固、安全组件、数... 更多>

为您提供简单高效、处理能力可弹性伸缩的计算服务,帮助您快速构建更稳定、安全的应用,提升运维效率,降低 IT 成本... 更多>
MaxCompute75折抢购

MaxCompute75折抢购