基于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 相关文章推荐
XMLHTTP 乱码的解决方法(UTF8,GB2312 编码 解码)
Jan 12 Javascript
jquery中的$(document).ready()使用小结
Feb 14 Javascript
用js模拟struts2的多action调用示例
May 19 Javascript
jQuery前端分页示例分享
Feb 10 Javascript
js判断上传文件后缀名是否合法
Jan 28 Javascript
动态加载js、css的实例代码
May 26 Javascript
JavaScript中的this使用详解
Jul 27 Javascript
如何使用Bootstrap 按钮实例详解
Mar 29 Javascript
bootstrap轮播模板使用方法详解
Nov 17 Javascript
JS简单判断是否在微信浏览器打开的方法示例
Jan 08 Javascript
vue实现前台列表数据过滤搜索、分页效果
May 28 Javascript
微信小程序class封装http代码实例
Aug 24 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 结果集的分页实现代码
2009/03/10 PHP
回帖脱衣服的图片实现代码
2014/02/15 PHP
PHP中的reflection反射机制测试例子
2014/08/05 PHP
MyEclipse常用配置图文教程
2014/09/11 PHP
PHP提高编程效率的20个要点
2015/09/23 PHP
Yii多表联合查询操作详解
2016/06/02 PHP
示例详解Laravel的注册重构
2016/08/14 PHP
PHP xpath提取网页数据内容代码解析
2020/07/16 PHP
javascript延时重复执行函数 lLoopRun.js
2007/06/29 Javascript
JSChart轻量级图形报表工具(内置函数中文参考)
2010/10/11 Javascript
javascript验证上传文件的类型限制必须为某些格式
2013/11/14 Javascript
JQuery中使用Ajax赋值给全局变量失败异常的解决方法
2014/08/18 Javascript
NodeJS学习笔记之MongoDB模块
2015/01/13 NodeJs
JS组件系列之Bootstrap table表格组件神器【终结篇】
2016/05/10 Javascript
通过JS获取Request.QueryString()参数的值实现方法
2016/09/27 Javascript
jQuery事件详解
2017/02/23 Javascript
Nodejs搭建wss服务器教程
2017/05/24 NodeJs
深入浅出es6模板字符串
2017/08/26 Javascript
vue cli3.0结合echarts3.0与地图的使用方法示例
2019/03/26 Javascript
JavaScript实现的滚动公告特效【基于jQuery】
2019/07/10 jQuery
ES5新增数组的实现方法
2020/05/12 Javascript
python基础入门详解(文件输入/输出 内建类型 字典操作使用方法)
2013/12/08 Python
用python记录运行pid,并在需要时kill掉它们的实例
2017/01/16 Python
python检查URL是否正常访问的小技巧
2017/02/25 Python
如何在sae中设置django,让sae的工作环境跟本地python环境一致
2017/11/21 Python
Python import与from import使用及区别介绍
2018/09/06 Python
对python判断是否回文数的实例详解
2019/02/08 Python
Python语法垃圾回收机制原理解析
2020/03/25 Python
Python过滤掉numpy.array中非nan数据实例
2020/06/08 Python
Python实现加密的RAR文件解压的方法(密码已知)
2020/09/11 Python
Dr. Martens马汀博士法国官网:马丁靴鼻祖
2020/01/15 全球购物
命名空间(namespace)和程序集(Assembly)有什么区别
2015/09/25 面试题
学校对教师的评语
2014/04/28 职场文书
见习报告格式要求
2014/11/04 职场文书
2014年煤矿工作总结
2014/11/24 职场文书
英语读书笔记
2015/07/02 职场文书