vue实现商城购物车功能
时间:2019-04-10
本文章向大家介绍vue实现商城购物车功能,主要包括vue实现商城购物车功能使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
本文实例为大家分享了vue实现商城购物车功能的具体代码,供大家参考,具体内容如下
首先,先上最终的效果图
效果并不是很好看,但是这不是重点。
首先,我们先看下布局:
<template> <div class="shopcar" id="demo04"> <div class="header-title"> <h3>购物车</h3> </div> <div class="car-list"> <ul> <li class="car-item" v-for="(item,index) in good_list"> <div class="input-block"> <label class="input-label" :class="{active: item.is_selected}" :for="'car-checkbox-'+index" @click="select_one(index)"></label> </div> <div class="car-item-content"> <div class="car-img"> <img :src="item.img" /> </div> <div class="car-cont"> <h3>{{item.title}}</h3> <div class="cat-desc"> <span v-for="spec in item.spec_item">{{spec}}</span> </div> </div> <div class="num"> <span @click="reduce(index)">-</span> <span>{{item.num}}</span> <span @click="add(index)">+</span> </div> <div class="car-price"> <span class="car-price">¥{{item.price}}</span> <span class="car-num">X{{item.num}}</span> </div> </div> </li> </ul> </div> <div class="car-footer"> <div class="foot-car"> <label for="foot-check" class="input-label" :class="{active: selected_all}" @click="slect_all"></label> </div> <div class="total-cont"> <span>总价:{{totalPrice}}</span> <span>共{{totalNum}}件</span> </div> <div class="btn-box"> <button>立即下单</button> </div> </div> </div> </template>
非常常见的布局,微商城购物车随处可见,先说明下,在这里,实现选中的功能并不是用传统的label+checkbox实现,而是一个单独的label,目的是为了简化dom结构,在传统的jq项目或者zepto项目中,一般会会这样写,主要是为了方便操作demo,但是vue项目完全不用考虑dom的操作,怎么方便怎么来就ok。
在加些简单的样式,
.header-title height 42px line-height 42px background #f5f5f5 border-bottom 1px solid #ddd .header-title h3 font-weight normal text-align center .car-list background #f2f2f2 margin-top 12px padding 8px .car-item border-bottom 1px solid #ddd position relative height 76px overflow hidden .car-checkbox display none .input-block width 30px float left height 55px line-height 55px .input-label cursor pointer position absolute width 18px height 18px top 18px left 0 background #fff border:2px solid #ccc border-radius 50% .input-label:after opacity 0 content '' position absolute width 9px height 5px background transparent top 6px left 6px border 2px solid #333 border-top none border-right none -webkit-transform rotate(-45deg) -moz-transform rotate(-45deg) -o-transform rotate(-45deg) -ms-transform rotate(-45deg) transform rotate(-45deg) .car-img width 64px height 64px float left overflow hidden .car-img img width 100% .input-label.active background #F15A24 .car-cont margin-left 100px .car-cont h3 font-weight normal line-height 24px font-size 14px .car-price position absolute right 12px bottom 0px width 40px height 40px text-align right .car-price span display block height 24px line-height 24px width 100% .car-footer height 60px background #f5f5f5 position fixed bottom 0 left 0 right 0 .foot-car width 42px height 60px float left margin-left 12px position relative .total-cont height 60px line-height 60px font-size 16px float left .total-cont span display inline-block margin-left 12px .btn-box float right height 60px line-height 60px .btn-box button height 100% width: 100px border none background #F15A24 color #fff font-size 16px .num position absolute top 28px right 25px width 120px .num span display inline-block width 28px height 28px float left text-align center line-height 28px border 1px solid #ddd font-size 14px
最近在学习stylus的使用,所以,就当做练习了。
接下就是javascript了。
export default { data () { return { good_list: [ { title: 'Apple iPhone 6s 16GB 玫瑰金色 移动联通电信4G手机', img: "http://sc.tywebs.cn/public/upload/goods/2017/04-27/a767693b9a84747f25335f0e33d3d380.jpg", num: 2, price: 6070.00, spec_item:[ '内存:16G', '网络:4G', '颜色:玫瑰金' ], is_selected: false },{ title: 'Apple iPhone 6s 32GB 玫瑰金色 移动联通电信4G手机', img: 'http://sc.tywebs.cn/public/upload/goods/2017/04-27/a767693b9a84747f25335f0e33d3d380.jpg', num: 2, price: 4570.00, spec_item:[ '内存:32G', '网络:4G', '颜色:玫瑰金' ], is_selected: true },{ title: 'Apple iPhone 6s 8GB 玫瑰金色 移动联通电信4G手机', img: 'http://sc.tywebs.cn/public/upload/goods/2017/04-27/a767693b9a84747f25335f0e33d3d380.jpg', num: 2, price: 4870.00, spec_item:[ '内存:8G', '网络:4G', '颜色:玫瑰金' ], is_selected: false },{ title: 'Apple iPhone 6s 128GB 玫瑰金色 移动联通电信4G手机', img: 'http://sc.tywebs.cn/public/upload/goods/2017/04-27/a767693b9a84747f25335f0e33d3d380.jpg', num: 2, price: 10568.00, spec_item:[ '内存:128G', '网络:4G', '颜色:玫瑰金' ], is_selected: true }, ], totalPrice: 0, totalNum: 0, selected_all: false } }, mounted: function () { this.getTotal(); }, watch: { 'good_list': { handler: function (val, oldVal) { // console.log(val) return val; }, deep: true } }, methods: { getTotal () { this.totalPrice = 0 this.totalNum = 0 for (var i = 0; i < this.good_list.length; i++) { var _d = this.good_list[i] if(_d.is_selected){ this.totalPrice += _d['price'] * _d['num'] this.totalNum +=_d['num'] } } }, select_one (index) { if(this.good_list[index].is_selected == true){ this.good_list[index].is_selected = false }else{ this.good_list[index].is_selected = true } this.getTotal() }, slect_all () { if(this.selected_all){ for (var i = 0; i < this.good_list.length; i++) { this.good_list[i].is_selected = false; } this.selected_all = false }else{ for (var i = 0; i < this.good_list.length; i++) { this.good_list[i].is_selected = true; } this.selected_all = true } this.getTotal() }, reduce (index) { if(this.good_list[index].num <= 1) return; this.good_list[index].num -- this.getTotal() }, add (index) { this.good_list[index].num ++ this.getTotal() } } }
这里用mock数据来代替后台请求数据的动作,为了方便测试,逻辑比较简单,首先getTotal这个方法用来计算选中的item的数量以及总价,select_one用来处理单个选中的逻辑,slect_all 用来处理全部选中以及全部取消选中的操作,reduce用来处理处理减操作,顾名思义add用来处理加的操作。当然在真实的开发中,还会有校验库存的动作,每次加减都要校验库存。数据处理也会更复杂,但是闻琴弦而知雅意,器原理都是相通的。
github地址传送门
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
- Python基础06 循环
- js也可以有自定义事件 注入就是这么爽
- Python基础05 缩进和选择
- Python基础04 运算
- 剑指OFFER之二叉树中和为某一值的路径(九度OJ1368)
- Python基础03 序列
- Python基础02 基本数据类型
- 用命令重启IIS 常重启IIS的朋友看过来
- Python基础01 Hello World!
- 剑指OFFER之从上往下打印二叉树(九度OJ1523)
- 给你的博客加上“Fork me on Github”彩带
- Android Studio添加PNG图片报错原因
- 剑指OFFER之包含min函数的栈(九度OJ1522)
- 使用VS2010开发Qt程序的一点经验
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Python matplotlib数据可视化 subplot绘制多个子图
- python pathlib模块的基本使用和总结
- Python 爬取前程无忧最新招聘数据 matplotlib数据分析与可视化
- Python opencv图像处理基础总结(一)
- Python opencv图像处理基础总结(二) ROI操作与泛洪填充 模糊操作 边缘保留滤波EPF
- python asyncio+aiohttp异步请求 批量快速验证代理IP是否可用
- python pyecharts数据可视化 玫瑰图、柱形图、饼图、环图
- Python opencv图像处理基础总结(三) 图像直方图 直方图应用 直方图反向投影
- Python opencv图像处理基础总结(四) 模板匹配 图像二值化
- python pyecharts数据可视化 词云图 仪表盘 水球图
- python jupyter notebook配置 更改默认工作目录 更换皮肤主题 代码字体 大小
- 关于直播卖货系统平台在微信浏览器中音视频播放的问题
- python爬虫 scrapy爬虫框架的基本使用
- Python opencv图像处理基础总结(五) 图像金字塔 图像梯度 Canny算法边缘提取
- python scrapy爬虫练习(1) 爬取豆瓣电影top250信息