基于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 相关文章推荐
StringTemplate遇见jQuery冲突的解决方法
Sep 22 Javascript
含有CKEditor的表单如何提交
Jan 09 Javascript
JavaScript前端图片加载管理器imagepool使用详解
Dec 29 Javascript
Javascript中的getUTCHours()方法使用详解
Jun 10 Javascript
JavaScript正则表达式匹配 div  style标签
Mar 15 Javascript
【JS+CSS3】实现带预览图幻灯片效果的示例代码
Mar 17 Javascript
关于webuploader插件使用过程遇到的小问题
Nov 07 Javascript
jquery将标签元素的高设为屏幕的百分比
Apr 19 jQuery
bootstrapTable+ajax加载数据 refresh更新数据
Aug 31 Javascript
在 Vue-CLI 中引入 simple-mock实现简易的 API Mock 接口数据模拟
Nov 28 Javascript
layer 关闭指定弹出层的例子
Sep 25 Javascript
微信小程序绑定手机号获取验证码功能
Oct 22 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/06/29 PHP
php调用mysql数据 dbclass类
2011/05/07 PHP
IIS下PHP的三种配置方式对比
2014/11/20 PHP
PHP Filter过滤器全面解析
2016/08/09 PHP
php根据年月获取当月天数及日期数组的方法
2016/11/30 PHP
PHP数字前补0的自带函数sprintf 和number_format的用法(详解)
2017/02/06 PHP
浅谈PHP接入(第三方登录)QQ登录 OAuth2.0 过程中遇到的坑
2017/10/13 PHP
javascript 客户端验证上传图片的大小(兼容IE和火狐)
2009/08/15 Javascript
浅谈tudou土豆网首页图片延迟加载的效果
2010/06/23 Javascript
jquery实现的让超出显示范围外的导航自动固定屏幕最顶上
2011/09/22 Javascript
JS保留两位小数 四舍五入函数的小例子
2013/11/20 Javascript
js中substring和substr的定义和用法
2014/05/05 Javascript
get(0).tagName获得作用标签示例代码
2014/10/08 Javascript
整理Javascript基础语法学习笔记
2015/11/29 Javascript
返回函数的JavaScript函数
2016/06/14 Javascript
JS简单设置下拉选择框默认值的方法
2016/08/20 Javascript
原生js实现放大镜特效
2017/03/08 Javascript
jQuery实现的文字逐行向上间歇滚动效果示例
2017/09/06 jQuery
Node.js 使用request模块下载文件的实例
2018/09/05 Javascript
微信小程序自定义头部导航栏(组件化)
2019/11/15 Javascript
easyUI使用分页过滤器对数据进行分页操作实例分析
2020/06/01 Javascript
Vue实现多页签组件
2021/01/14 Vue.js
[08:44]DOTA2发布会群星聚首 我们都是刀塔人
2014/03/21 DOTA
简单介绍利用TK在Python下进行GUI编程的教程
2015/04/13 Python
Python编程实现二叉树及七种遍历方法详解
2017/06/02 Python
Python中字典和集合学习小结
2017/07/07 Python
python挖矿算力测试程序详解
2019/07/03 Python
Python yield的用法实例分析
2020/03/06 Python
CSS3 3D酷炫立方体变换动画的实现
2019/03/26 HTML / CSS
先进班级集体事迹材料
2014/01/30 职场文书
学校端午节活动方案
2014/08/23 职场文书
预备党员期盼十八届四中全会召开思想汇报
2014/10/17 职场文书
2015年文员个人工作总结
2015/04/09 职场文书
2015年国庆节演讲稿范文
2015/07/30 职场文书
少先队中队工作总结
2015/08/14 职场文书
PHP连接MSSQL数据库案例,PHPWAMP多个PHP版本连接SQL Server数据库
2021/04/16 PHP