基于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 对象与DOM对象之两者相互间的转换
Apr 27 Javascript
JQuery 遮罩层实现(mask)实现代码
Jan 09 Javascript
理解Javascript_08_函数对象
Oct 15 Javascript
jquery 获取自定义属性(attr和prop)的实现代码
Jun 27 Javascript
javascript中的作用域和上下文使用简要概述
Dec 05 Javascript
jquery为页面增加快捷键示例
Jan 31 Javascript
跟我学习javascript的prototype,getPrototypeOf和__proto__
Nov 17 Javascript
Bootstrap插件全集
Jul 18 Javascript
Node.js使用gm拼装sprite图片
Jul 04 Javascript
微信小程序实现的picker多级联动功能示例
May 23 Javascript
vue页面更新patch的实现示例
Mar 25 Javascript
基于ant design日期控件使用_仅月份的操作
Oct 27 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
我的论坛源代码(六)
2006/10/09 PHP
简单的cookie计数器实现源码
2013/06/07 PHP
CI框架自动加载session出现报错的解决办法
2014/06/17 PHP
javascript静态的url如何传递
2007/05/03 Javascript
JavaScript 滚轮事件使用说明
2010/03/07 Javascript
一些相见恨晚的 JavaScript 技巧
2010/04/25 Javascript
jquery validate.js表单验证的基本用法入门
2010/05/13 Javascript
js 中{},[]中括号,大括号使用详解
2011/05/12 Javascript
Jquery实现简单的动画效果代码
2012/03/18 Javascript
jQuery的显示和隐藏方法与css隐藏的样式对比
2013/10/18 Javascript
JS判断网页广告是否被浏览器拦截过滤的代码
2015/04/05 Javascript
jQuery检查事件是否触发的方法
2015/06/26 Javascript
通用javascript代码判断版本号是否在版本范围之间
2015/11/29 Javascript
JavaScript实现前端实时搜索功能
2020/03/26 Javascript
Angular5.1新功能分享
2017/12/21 Javascript
jQuery实现当拉动滚动条到底部加载数据的方法分析
2019/01/24 jQuery
Cordova(ionic)项目实现双击返回键退出应用
2019/09/17 Javascript
JS实现普通轮播图特效
2020/01/01 Javascript
Python3 适合初学者学习的银行账户登录系统实例
2017/08/08 Python
Django之使用内置函数和celery发邮件的方法示例
2019/09/16 Python
Python+Kepler.gl实现时间轮播地图过程解析
2020/07/20 Python
Python Selenium实现无可视化界面过程解析
2020/08/25 Python
python 实现逻辑回归
2020/12/30 Python
python 30行代码实现蚂蚁森林自动偷能量
2021/02/08 Python
CSS3选择器新增问题的实现
2021/01/21 HTML / CSS
The Hut美国/加拿大:英国领先的豪华在线百货商店
2019/03/26 全球购物
造型师求职自荐信
2013/09/27 职场文书
小区门卫岗位职责
2013/12/31 职场文书
工作推荐信范文
2014/05/10 职场文书
2014年调度员工作总结
2014/11/19 职场文书
小学语文复习计划
2015/01/19 职场文书
项目投资意向书范本
2015/05/09 职场文书
公司财务管理制度
2015/08/04 职场文书
2016年秋季运动会广播稿
2015/12/21 职场文书
Nginx服务器添加Systemd自定义服务过程解析
2021/03/31 Servers
用 Python 元类的特性实现 ORM 框架
2021/05/19 Python