基于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 相关文章推荐
js与运算符和或运算符的妙用
Feb 14 Javascript
node.js中的fs.mkdir方法使用说明
Dec 17 Javascript
jQuery Ajax使用实例
Apr 16 Javascript
javascript实现瀑布流动态加载图片原理
Aug 12 Javascript
angular 用拦截器统一处理http请求和响应的方法
Jun 08 Javascript
动态Axios的配置步骤详解
Jan 12 Javascript
vue打包的时候自动将px转成rem的操作方法
Jun 20 Javascript
详解webpack模块加载器兼打包工具
Sep 11 Javascript
vue.extend与vue.component的区别和联系
Sep 19 Javascript
JavaScript学习笔记之DOM基础操作实例小结
Jan 09 Javascript
浅谈vue中$event理解和框架中在包含默认值外传参
Aug 07 Javascript
微信小程序实现分页加载效果
Nov 19 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 ajax 分页类代码
2008/11/13 PHP
php预定义变量使用帮助(带实例)
2013/10/30 PHP
php生成缩略图示例代码分享(使用gd库实现)
2014/01/20 PHP
根据分辨率不同,调用不同的css文件
2006/07/07 Javascript
jQuery建立一个按字母顺序排列的友好页面索引(兼容IE6/7/8)
2013/02/26 Javascript
js如何设置在iframe框架中指定div不显示
2013/12/04 Javascript
js控制鼠标事件移动及移出效果显示
2014/10/19 Javascript
js使用setTimeout实现定时炸弹的方法
2015/04/10 Javascript
jQuery实现在列表的首行添加数据
2015/05/19 Javascript
浅析JavaScript动画
2015/06/10 Javascript
js实现右键自定义菜单
2016/12/03 Javascript
Vue+axios 实现http拦截及路由拦截实例
2017/04/25 Javascript
原生JS实现图片网格式渐显、渐隐效果
2017/06/05 Javascript
js取小数点后两位四种方法
2019/01/18 Javascript
解决vant中 tab栏遇到的坑 van-tabs
2020/11/04 Javascript
[01:03:38]2014 DOTA2国际邀请赛中国区预选赛5.21 CNB VS CIS
2014/05/22 DOTA
[02:05]2014DOTA2国际邀请赛 BBC外卡赛赛后总结
2014/07/09 DOTA
Python的Django框架中if标签的相关使用
2015/07/15 Python
Python实现定时任务
2017/02/08 Python
关于python的bottle框架跨域请求报错问题的处理方法
2017/03/19 Python
Python2包含中文报错的解决方法
2018/07/09 Python
Python封装原理与实现方法详解
2018/08/28 Python
python感知机实现代码
2019/01/18 Python
用pyqt5 给按钮设置图标和css样式的方法
2019/06/24 Python
python中的列表与元组的使用
2019/08/08 Python
阿里云ECS服务器部署django的方法
2019/08/29 Python
css3之UI元素状态伪类选择器实例演示
2017/08/11 HTML / CSS
浅谈移动端网页图片预加载方案
2018/11/05 HTML / CSS
html5+css如何实现中间大两头小的轮播效果
2018/12/06 HTML / CSS
extern在函数声明中是什么意思
2014/01/19 面试题
建龙钢铁面试总结
2014/04/15 面试题
绿化先进工作者事迹材料
2014/01/30 职场文书
德语专业求职信
2014/03/12 职场文书
导游词之贵州百里杜鹃
2019/10/29 职场文书
html css3不拉伸图片显示效果
2021/06/07 HTML / CSS
SpringBoot系列之MongoDB Aggregations用法详解
2022/02/12 MongoDB