商城之购物车商品添加和结算的小效果----基于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
当当网上书店购物车——JS源码
当当网上书店购物车——JS源码
14 0
|
3月前
|
JavaScript
|
3月前
|
前端开发 JavaScript
js + ajax实现商品列表页到详情页的跳转
js + ajax实现商品列表页到详情页的跳转
|
4月前
|
JavaScript
Vue实现淘宝商品放大镜效果
Vue实现淘宝商品放大镜效果
52 0
|
5月前
|
缓存 JavaScript 前端开发
Vue.js入门模板语法[上] 及Vue.js实现购物车---详细讲解
Vue.js入门模板语法[上] 及Vue.js实现购物车---详细讲解
31 0
|
1月前
|
JavaScript 前端开发
购物车的功能——JS源码
购物车的功能——JS源码
14 2
|
5月前
|
JavaScript
用JS实现商品添加、删除和修改
用JS实现商品添加、删除和修改
95 0
|
6月前
|
数据采集 JavaScript 前端开发
Javascript抓取京东、淘宝商品数据
随着互联网的发展,越来越多的商品信息被发布在各大电商平台上,如京东、淘宝等。这些平台上的商品信息对于消费者来说是非常重要的,可以帮助他们了解商品的价格、详情和评价等信息。而对于商家来说,了解竞争对手的商品信息也是至关重要的。因此,抓取京东、淘宝商品数据成为了一种常见的需求。本文将介绍如何使用JavaScript来抓取京东、淘宝的商品数据。
|
3月前
|
JavaScript 前端开发
js实现购物车效果
js实现购物车效果
23 0
|
3月前
|
SQL JSON 前端开发
JavaWeb:商品管理系统(Vue版)
JavaWeb商品管理系统是一个使用Java语言开发的,用于管理商品信息的Web应用程序。它提供了一套完整的功能,包括商品的增加、删除、修改和查询等操作。
52 2
JavaWeb:商品管理系统(Vue版)