基于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 相关文章推荐
Javascript 判断函数类型完美解决方案
Sep 02 Javascript
javascript批量修改文件编码格式的方法
Jan 27 Javascript
轻量级网页遮罩层jQuery插件用法实例
Jul 31 Javascript
jQuery实现点击小图显示大图代码分享
Aug 25 Javascript
JQ选择器_选择同类元素的第N个子元素的实现方法
Sep 08 Javascript
详解angular element()方法使用
Apr 08 Javascript
JS从非数组对象转数组的方法小结
Mar 26 Javascript
js技巧之十几行的代码实现vue.watch代码
Jun 09 Javascript
js form表单input框限制20个字符,10个汉字代码实例
Apr 12 Javascript
Android 自定义view仿微信相机单击拍照长按录视频按钮
Jul 19 Javascript
在Layui中操作数据表格,给指定单元格添加事件示例
Oct 26 Javascript
js实现数字滚动特效
Dec 16 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
php基础知识:类与对象(4) 范围解析操作符(::)
2006/12/13 PHP
PHP 命令行参数详解及应用
2011/05/18 PHP
PHP中使用虚代理实现延迟加载技术
2014/11/05 PHP
PHP 读取文本文件内容并分页显示
2016/01/02 PHP
jquery select动态加载选择(兼容各种浏览器)
2013/02/01 Javascript
javascript调试过程中找不到哪里出错的可能原因
2013/12/16 Javascript
原生js页面滚动延迟加载图片
2015/12/20 Javascript
javascript实现九宫格相加数值相等
2020/05/28 Javascript
基于JavaScript实现添加到购物车效果附源码下载
2016/08/22 Javascript
jQuery tagsinput在h5邮件客户端中应用详解
2016/09/26 Javascript
bootstrap modal弹出框的垂直居中
2016/12/14 Javascript
Vuex提升学习篇
2018/01/11 Javascript
小程序实现授权登陆的解决方案
2018/12/02 Javascript
vue实现的网易云音乐在线播放和下载功能案例
2019/02/18 Javascript
jquery 回调操作实例分析【回调成功与回调失败的情况】
2019/09/27 jQuery
Vue中错误图片的处理的实现代码
2019/11/07 Javascript
Javascript类型判断相关例题及解析
2020/08/26 Javascript
使用Vant完成Dialog弹框案例
2020/11/11 Javascript
python3图片转换二进制存入mysql
2013/12/06 Python
Python字符串中查找子串小技巧
2015/04/10 Python
Python实现SMTP发送邮件详细教程
2021/03/02 Python
python利用lxml读写xml格式的文件
2017/08/10 Python
Python实现从SQL型数据库读写dataframe型数据的方法【基于pandas】
2019/03/18 Python
python sorted函数的小练习及解答
2019/09/18 Python
Python模拟FTP文件服务器的操作方法
2020/02/18 Python
python GUI库图形界面开发之PyQt5信号与槽基础使用方法与实例
2020/03/06 Python
详细分析Python可变对象和不可变对象
2020/07/09 Python
python实现在列表中查找某个元素的下标示例
2020/11/16 Python
python的scipy.stats模块中正态分布常用函数总结
2021/02/19 Python
HTML5 Canvas概述
2009/08/26 HTML / CSS
HTML5实现签到 功能
2018/10/09 HTML / CSS
缓刑人员思想汇报500字
2014/09/12 职场文书
开业庆典活动策划方案
2014/09/21 职场文书
食品仓管员岗位职责
2015/04/01 职场文书
2015年乡镇平安建设工作总结
2015/05/13 职场文书
宿舍卫生管理制度
2015/08/05 职场文书