商城之购物车商品添加和结算的小效果----基于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"码上有钱"

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

相关文章
|
1月前
|
JavaScript
如何通过点击商品的信息(图片或者文字)跳转到更加详细的商品信息介绍(前后端分离之Vue实现)
该博客文章介绍了如何在Vue 2框架下实现前后端分离的商品信息展示和详情页跳转,包括排序筛选、详情展示、加入购物车和分享功能。
如何通过点击商品的信息(图片或者文字)跳转到更加详细的商品信息介绍(前后端分离之Vue实现)
|
1月前
|
缓存 JavaScript 前端开发
Vue.js 2 项目实战(五):水果购物车
Vue.js 2 项目实战(五):水果购物车
|
2月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的华为数码商城交易平台附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的华为数码商城交易平台附带文章源码部署视频讲解等
19 2
|
2月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的原色蛋糕商城附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的原色蛋糕商城附带文章源码部署视频讲解等
10 0
|
2月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的二手商品网站附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的二手商品网站附带文章源码部署视频讲解等
14 0
|
2月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的“涛宝”大学生二手物品交易商城附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的“涛宝”大学生二手物品交易商城附带文章源码部署视频讲解等
18 0
|
2月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的我爱我家地方特色农产品商城附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的我爱我家地方特色农产品商城附带文章源码部署视频讲解等
10 0
|
2月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的动漫周边商城附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的动漫周边商城附带文章源码部署视频讲解等
27 0
|
JavaScript 前端开发 开发者
javascript--实现购物车的实例分享
购物车对于大部分用户来说肯定都不陌生,每当双十一、双十二,我们都要把自己想要买的东西,提前加入购物车中,等到11月11号的凌晨抢时间抓紧下单。这对于用户来说,既可以管理自己想要购买的物品,又可以在购物车中进行选择。
2487 0
javascript--实现购物车的实例分享
|
2月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
70 2