基于vue.js实现购物车


Posted in Javascript onJanuary 15, 2020

本文实例为大家分享了vue.js实现购物车的具体代码,供大家参考,具体内容如下

基于vue.js实现购物车

template

<template>
<div class="all">
<div class="head">
<span>购物车</span>
</div>
<ul class="menu">
<li class="li">
<input type="checkbox" id="all" v-model="checkedAll" @change="checkedAllChange()">
<label for="all"></label>
全选
</li>
<li class="li">商品代码</li>
<li class="li">商品名称</li>
<li class="li">商品单价</li>
<li class="li">商品数量</li>
<li class="li">商品库存</li>
<li class="li">商品小计</li>
</ul>
<div>
<ul v-for="data in data" :key="data.code" class="menu">
<li class="li">
<input type="checkbox" name="commodity" v-model="checked" :value="data" @change="changeAll()" >
</li>
<li class="li">{{data.code}}</li>
<li class="li">{{data.name}}</li>
<li class="li">¥{{data.price}}</li>
<li class="li">
<div @click="SubNum(data)">-</div>
<input type="number" v-model.lazy="data.number" @change="numberChange(data)" >
<div @click="AddNum(data)">+</div>
</li>
<li class="li">{{data.stock}}</li>
<li class="li">¥{{data.number*data.price}}</li>
</ul>
</div>
<div class="info">
<p>{{commodityNumber}}件商品</p>
<p>总计:<span>¥{{numberAll}}</span></p>
</div>
</div>
</template>

script

<script>
export default {
data() {
return {
checkedAll: false,
checked: [],
totalPrice: 0,
data: {
one: {
code: 10001,
name: "商品一",
price: 26,
number: 1,
stock: 6
},
two: {
code: 10002,
name: "商品二",
price: 34,
number: 1,
stock: 14
},
three: {
code: 10003,
name: "商品三",
price: 48,
number: 1,
stock: 2
},
four: {
code: 10004,
name: "商品四",
price: 63,
number: 1,
stock: 12
},
five: {
code: 10005,
name: "商品五",
price: 50,
number: 1,
stock: 92
}
}
};
},
mounted() {},
methods: {
//判断全选事件
checkedAllChange() {
if (this.checkedAll) {
for (let i in this.data) {
this.checked.push(this.data[i]);
}
} else {
this.checked = [];
}
},
changeAll() {
if (this.checked.length == Object.keys(this.data).length) {
this.checkedAll = true;
} else {
this.checkedAll = false;
}
},
// 加减
SubNum(data) {
data.number--;
if (data.number < 1) {
data.number = 1;
}
},
AddNum(data) {
data.number++;
if (data.number > data.stock) {
data.number = data.stock;
}
},
//输入
numberChange(data) {
if (data.number > data.stock) {
data.number = data.stock;
}
}
},
computed: {
//商品数量
commodityNumber() {
return this.checked.length;
},
//总价
numberAll() {
var numberAll = 0;
for (let i in this.checked) {
numberAll += this.checked[i].number * this.checked[i].price;
}
return numberAll;
}
}
};
</script>

css

<style lang="scss" scoped type="text/css">
ul,
li {
list-style: none;
}
.all {
width: 800px;
height: 500px;
background: #fff;
border: 1px solid #177ecb;
margin-left: 300px;
.head {
background: #177ecb;
height: 36px;
line-height: 36px;
color: #fff;
padding-left: 15px;
}
.menu {
height: 32px;
width: 100%;
border-bottom: 1px solid #d4d4d4;
padding: 0 15px;
display: flex;
.li {
line-height: 32px;
flex: 1;
border-right: 1px solid #d4d4d4;
text-align: center;
input[type="number"] {
width: 40px;
display: inline-block;
height: 20px;
}
div {
width: 20px;
height: 20px;
padding: 0;
display: inline-block;
background: #333;
color: #fff;
line-height: 20px;
text-align: center;
cursor: pointer;
}
div:active {
background: #999;
}
}
.li:nth-of-type(3) {
flex: 2;
}
.li:last-child {
border: 0;
}
}
.menu + div {
height: 350px;
margin-bottom: 20px;
border-bottom: 1px solid #177ecb;
}
.info {
text-align: right;
margin-right: 20px;
span {
color: #f00;
font-size: 20px;
font-weight: 900;
}
}
}
</style>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
文本框的字数限制功能jquery插件
Nov 24 Javascript
javascript判断ie浏览器6/7版本加载不同样式表的实现代码
Dec 26 Javascript
Javascript 拖拽的一些高级的应用(逐行分析代码,让你轻松了拖拽的原理)
Jan 23 Javascript
JQuery日期插件datepicker的使用方法
Mar 03 Javascript
Bootstrap 3 进度条的实现
Feb 22 Javascript
jQuery倒计时代码(超简单)
Feb 27 Javascript
Iscrool下拉刷新功能实现方法(推荐)
Jun 26 Javascript
对node.js中render和send的用法详解
May 14 Javascript
ES6 Iterator接口和for...of循环用法分析
Jul 31 Javascript
layer弹出层取消遮罩的方法
Sep 25 Javascript
使用JS来动态操作css的几种方法
Dec 18 Javascript
Vue实现腾讯云点播视频上传功能的实现代码
Aug 17 Javascript
原生js+css调节音量滑块
Jan 15 #Javascript
Vue 图片压缩并上传至服务器功能
Jan 15 #Javascript
JS函数进阶之继承用法实例分析
Jan 15 #Javascript
JS函数进阶之prototy用法实例分析
Jan 15 #Javascript
JS函数基本定义与用法示例
Jan 15 #Javascript
JS几个常用的函数和对象定义与用法示例
Jan 15 #Javascript
JS自定义对象创建与简单使用方法示例
Jan 15 #Javascript
You might like
is_uploaded_file函数引发的不能上传文件问题
2013/10/29 PHP
WordPress中用于获取文章作者与分类信息的方法整理
2015/12/17 PHP
PHP删除二维数组中相同元素及数组重复值的方法示例
2017/05/05 PHP
javascript入门·对象属性方法大总结
2007/10/01 Javascript
JavaScript中的Document文档对象
2008/01/16 Javascript
Mozilla 表达式 __noSuchMethod__
2009/04/05 Javascript
ASP.NET中基于JQUERY的高性能的TreeView补充
2011/02/23 Javascript
js 链式延迟执行DOME
2012/01/04 Javascript
javascript获取作用在元素上面的样式属性代码
2012/09/20 Javascript
jquery属性过滤选择器使用示例
2013/06/18 Javascript
深入解析JavaScript中的数字对象与字符串对象
2015/10/21 Javascript
javascript HTML5 canvas实现打砖块游戏
2020/06/18 Javascript
JavaScript trim 实现去除字符串首尾指定字符的简单方法
2016/12/27 Javascript
JavaScript中使用webuploader实现上传视频功能(demo)
2017/04/10 Javascript
js实现可以点击收缩或张开的悬浮窗
2017/09/18 Javascript
js实现一个简单的MVVM框架示例
2018/01/15 Javascript
推荐一个基于Node.js的表单验证库
2019/02/15 Javascript
js实现整体缩放页面适配移动端
2020/03/31 Javascript
[03:08]TI9战队档案 - Vici Gaming
2019/08/20 DOTA
python操作MongoDB基础知识
2013/11/01 Python
python和flask中返回JSON数据的方法
2018/03/26 Python
Python 使用threading+Queue实现线程池示例
2019/12/21 Python
keras 特征图可视化实例(中间层)
2020/01/24 Python
python实现无边框进度条的实例代码
2020/12/30 Python
关于python中remove的一些坑小结
2021/01/04 Python
非常震撼的纯CSS3人物行走动画
2016/02/24 HTML / CSS
使用canvas绘制超炫时钟
2014/12/17 HTML / CSS
video下autoplay属性无效的解决方法(添加muted属性)
2020/05/19 HTML / CSS
C面试题
2015/10/08 面试题
一套.net面试题及答案
2016/11/02 面试题
EJB实例的生命周期
2016/10/28 面试题
单位绩效考核方案
2014/05/11 职场文书
2014年工程部工作总结
2014/11/25 职场文书
平遥古城导游词
2015/02/03 职场文书
2015年工商所工作总结
2015/05/21 职场文书
辩护意见书
2015/06/04 职场文书