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

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

相关文章
|
分布式计算 JavaScript 前端开发
vue学习第8章(vue的购物车案例)
欢迎来到我的博客!我是瑞雨溪,一名热爱JavaScript和Vue的大一学生。自学前端2年半,正向全栈进发。本篇分享一个综合练习小demo,包括目录结构、HTML、JS及CSS代码,通过增删商品实现总价计算。关注我,获取更多前端知识!🎉🎉🎉
131 1
|
前端开发 JavaScript API
Vue3商品SKU多规格编辑组件
Vue3商品SKU多规格编辑组件
739 5
|
JavaScript
js学习--商品列表商品详情
js学习--商品列表商品详情
133 2
|
JSON JavaScript 前端开发
vue尚品汇商城项目-day00【项目介绍:此项目是基于vue2的前台电商项目和后台管理系统】
vue尚品汇商城项目-day00【项目介绍:此项目是基于vue2的前台电商项目和后台管理系统】
135 1
|
JavaScript 前端开发
vue尚品汇商城项目-day01【3.项目路由的分析】
vue尚品汇商城项目-day01【3.项目路由的分析】
93 1
|
JSON 缓存 JavaScript
vue尚品汇商城项目-day01【1.vue-cli脚手架初始化项目生成文件的介绍】
vue尚品汇商城项目-day01【1.vue-cli脚手架初始化项目生成文件的介绍】
113 0
|
JavaScript
vue尚品汇商城项目-day01【2.vue-cli脚手架初始化项目的其他配置】
vue尚品汇商城项目-day01【2.vue-cli脚手架初始化项目的其他配置】
124 0
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
286 2
|
JavaScript 前端开发
JavaScript中的原型 保姆级文章一文搞懂
本文详细解析了JavaScript中的原型概念,从构造函数、原型对象、`__proto__`属性、`constructor`属性到原型链,层层递进地解释了JavaScript如何通过原型实现继承机制。适合初学者深入理解JS面向对象编程的核心原理。
215 1
JavaScript中的原型 保姆级文章一文搞懂
JS+CSS3文章内容背景黑白切换源码
JS+CSS3文章内容背景黑白切换源码是一款基于JS+CSS3制作的简单网页文章文字内容背景颜色黑白切换效果。
140 0