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

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

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

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

摘要: 【页面比较丑请忽略,完全没有审美感】 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"码上有钱"

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

用云栖社区APP,舒服~

【云栖快讯】新年大招!云栖社区为在读大学生/研究生准备了一份学(huan)习(zhuang)攻略,发布博文即有机会赢得iPad mini 4等大奖,学习换装两不误!欢迎报名参与~  详情请点击

网友评论

云栖技术
文章42篇 | 关注26
关注
一站式提供企业即时通讯、销售管理、协同办公。 查看详情
阿里云数据库内置的智能专家,提供云数据库问题诊断、性能优化、SQL分析、资源分析、优化报告等... 查看详情
基于深度学习技术及阿里巴巴多年的海量数据支撑, 提供多样化的内容识别服务,能有效帮助用户降低... 查看详情
为您提供简单高效、处理能力可弹性伸缩的计算服务,帮助您快速构建更稳定、安全的应用,提升运维效... 查看详情
2017阿里千余份技术干货大盘点

2017阿里千余份技术干货大盘点