首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

vue实现购物车小案例

Posted in Javascript onSeptember 27, 2019

本文实例为大家分享了vue实现购物车小案例的具体代码，供大家参考，具体内容如下

最终效果

vue实现购物车小案例

HTML部分：

<!doctype html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>shopcar.html</title>
 <script src="https://cdn.jsdelivr.net/npm/vue"></script>
 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
 <link rel="stylesheet" href="css/shopcar.css" >
 <script src="js/shopcar.js"></script>
</head>
<body>
 <div class="content1" id="content1">
 <div class="con1">
 <input type="checkbox" id="all" class="all">
 <p>全选</p>
 <p>商品</p>
 <p>单价</p>
 <p>数量</p>
 <p>小计</p>
 <p>操作</p>
 </div>
 <div class="con2">
 <ul class="uls1">
 <input type="checkbox" class="jingdong">
 <p class="uls1p2">京东自营</p>
 </ul>
 <ul class="uls1a">
 <p>满赠</p>
 <a href="#" >活动商品满19，即可领取商品一件></a>
 <p>查看赠品</p>
 <a href="#" >去凑单</a>
 </ul>
 <ul class="uls2" id="box">
 <input type="checkbox" class="all all1">
 <a href="#" >
 <img src="img/aaa.jpg" alt="">
 <p>OPPO R11全网通双卡双待 64G 32G<br> 手机 玫瑰金色</p>
 </a>
 <p class="weight"><i id="weight">￥2000</i></p>
 <button class="min" @click="sub(1,2000)">-</button>
 <input ref="add1" type="text" class="txt" v-model="add1">
 <button class="add" @click="add(1,2000)">+</button>
 <p class="xiaoji"><i id="xiaoji1">￥{{add2}}</i></p> 
 <p class="a666 b666">删除</p>
 <p class="a666">移到我的关注</p>
 <p class="a666">加到我的关注</p>
 </ul>
 <ul class="uls2" id="box2">
 <input type="checkbox" class="all all2">
 <a href="#" >
 <img src="img/bbb.jpg" alt="">
 <p>OPPO R11全网通双卡双待 64G 32G<br> 手机 玫瑰金色</p>
 </a>
 <p class="weight"><i id="weight">￥3000</i></p>
 <button class="min" @click="numsub(1,3000)">-</button>
 <input ref="num1" type="text" class="txt" v-model="num1">
 <button class="add" @click="numadd(1,3000)">+</button>
 <p class="xiaoji"><i id="xiaoji1">￥{{num2}}</i></p> 
 <p class="a666 b666">删除</p>
 <p class="a666">移到我的关注</p>
 <p class="a666">加到我的关注</p> 
 </ul>
 <div class="uls4">
 <div class="uls4L">
 <input type="checkbox" class="all">
 <a href="#" class="delete">删除选中商品</a>
 <a href="#" >移到我的关注</a>
 <a href="#" >清除下柜商品</a>
 </div>
 <div class="uls4R">
 <div class="uls4a">
 <div class="uls4a1">
 <div class="aaa">
 <p>已选择<i class="chose">0</i>件商品^</p>
 <p>总价：<span>￥</span><i>{{num3}}</i></p>
 </div>
 <p class="bbb">已节省：￥- 00.0</p>
 </div>
 </div>
 <div class="uls4b">
 <a href="gouwu.html" rel="external nofollow" >去结算</a>
 </div>
 </div>
 </div>
 </div>
 </div>
<div class="fixed">
 <p>京东商城</p>
 <span>您确认删除吗？</span>
 <button class="sure">确认</button>
 <button class="quxiao">取消</button>
</div>
</body>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script src="js/jquery-1.8.3.min.js"></script>
<script src="js/shopcar.js"></script>
<script type="text/javascript"> 
</script>

css部分

/* common */
body,div,dl,dt,dd,ul,li,h1,h2,h3,h4,h5,h6,code,form,input,textarea,p,th,td,fieldset,legend,figure{
 margin:0;
 padding:0;
 }
 body{
 font-family:"微软雅黑",Arial;
 }
 ul,ol{
 list-style:none;
 }
 a{
 text-decoration:none;
 }
 img{
 border:0;
 }
 
/* content1 */
.content1{
 width: 100%;
}
.con1{
 width:952px; 
 height: 36px;
 margin:0 auto;
 background: #f3f3f3;
}
.con1 input{
 float: left;
 margin-top: 10px;
}
.con1 p{
 float: left;
 font-size: 12px;
 line-height: 36px;
}
.con1 p:nth-child(3){
 margin-left: 60px;
}
.con1 p:nth-child(4){
 margin-left: 300px;
}
.con1 p:nth-child(5){
 margin-left: 93px;
}
.con1 p:nth-child(6){
 margin-left: 93px;
}
.con1 p:nth-child(7){
 margin-left: 93px;
}
.con1 p:nth-child(8){
 margin-left: 93px;
}
.con2{
 width: 952px;
 height: 364px;
 margin:0 auto;
 margin-top: 15px;
}
.con2 ul:first-child{
 width: 100%;
 height: 36px;
 border-bottom: 1px solid #ececec;
}
.uls1 input, .uls1 p, .uls1 img{
 float: left;
 margin-top: 10px;
}
.uls1{
 background: white;
}
.uls1 p{
 font-size: 12px;
}
.all{
 margin-right: 10px;
 margin-left: 20px;
}
.uls1p1{
 margin-right: 20px;
 font-weight: 600;
}
.jingdong{
 margin-left: 20px;
}
.uls1a{
 width: 100%;
 height:37px;
 border-top: 2px solid #aaaaaa;
}
.uls1a p,.uls1a a{
 float: left;
}
.uls1a p:nth-child(1){
 font-size: 14px;
 width: 35px;
 height: 20px;
 border: 1px solid #f5993c;
 text-align: center;
 line-height: 20px;
 color: #ff9933;
 margin-left: 20px;
 margin-right: 20px;
 margin-top: 5px;
}
.uls1a a:nth-child(2){
 font-size: 12px;
 margin-top: 10px;
 margin-right: 20px;
 color: #999999;
}
.uls1a p:nth-child(3){
 width: 60px;
 height: 20px;
 background:red;
 text-align: center;
 line-height: 20px;
 color: white;
 font-size: 14px;
 margin-top: 5px;
}
.uls1a a:nth-child(4){
 font-size: 12px;
 margin-top: 10px;
 margin-left: 10px;
 color: #666666;
}
.uls1p2{
 margin-left: 10px;
 color: white;
 width: 55px;
 height: 17px;
 background: #e4393b;
 text-align: center;
}
.uls2{
 width: 100%;
 height: 98px;
 border-bottom:1px dashed #ececec;
 background: white;
}
.uls2 input,.uls2 a,.uls2 img,.uls2 li,.weight,button{
 float: left;
}
.uls2 a img{
 width: 60px;
 border: 1px solid #ececec;
 margin-top: 17px;
}
.uls2 p,.uls2 span{
 font-size: 12px;
}
.uls2 a p{
 font-size: 12px;
 color: #666666;
 margin-top: 16px;
 float: left;
 margin-left: 10px;
}
.uls2 input{
 margin-top: 40px;
}
.uls2 li span{
 display: block;
}
.uls2 .txt{
 width: 32px;
 height: 19px;
 border: 1px solid #cccccc;
 border-left: none;
 border-right: none;
 outline:none; 
 text-indent: 10px;
 margin-top: 20px;
 font-weight: 600;
 font-size: 12px;
}
.weight{
 margin-left: 150px;
 margin-top: 19px;
}
.uls2 li{
 margin-top: 19px;
 margin-left: 66px;
 margin-right: 37px;
}
.uls2 button{
 width: 20px;
 height: 21px;
 border: none;
 border: 1px solid #cccccc;
 background: white;
 margin-top: 20px;
 outline:none; 
 cursor: pointer;
}
.uls2 li p{
 color: #999999;
 text-decoration: line-through;
}
.uls2 a .laji{
 width: 18px;
 float: left;
 margin-left: 60px;
 margin-top: 20px;
}
.xiaoji{
 float: left;
 margin-left: 47px;
 margin-top: 20px;
 margin-right: 80px;
}
.content1 i{
 font-style: normal;
}
.uls3{
 width: 100%;
 height: 36px;
 border-bottom: 1px dashed #cccccc;
 background: white;
}
.heji{
 float: right;
 margin-right: 20px;
}
.heji p,.heji span{
 float: left;
 font-size: 12px;
 line-height: 36px;
}
.heji span{
 color: #999999;
}
.heji p:nth-child(2),.heji p:nth-child(4){
 margin-right: 44px;
}
.uls4{
 width: 100%;
 height: 60px;
 border-top: 1px solid #cccccc;
 border-bottom: 1px solid #cccccc;
 margin-top: 15px;
 background: white;
}
.uls4L{
 float: left;
 margin-left: 10px;
}
.uls4R{
 float: right;
}
.uls4L p{
 float: left;
 line-height: 60px;
 font-size: 12px;
 color: #999999;
 margin-right: 10px;
}
.uls4L input{
 float: left;
 margin-top: 25px;
 margin-right: 10px;
}
.uls4L a{
 font-size: 12px;
 color: #999999;
 line-height: 60px;
}
.uls4L a:first-child{
 margin-right: 5px;
}
.uls4a,.uls4b{
 float: left;
}
.uls4a1 p{
 float: left;
 font-size: 12px;
}
.uls4a2 p ,.uls4a2 span{
 float: left;
 font-size: 12px;
 margin-top: 10px;
}
.uls4a{
 margin-right: 20px;
}
.aaa p{
 font-size: 12px;
 color: #999999;
}
.aaa p:first-child{
 margin-right: 20px;
 margin-top: 20px;
}
.aaa p:last-child{
 margin-top: 20px;
}
.aaa span,.aaa i{
 color: red;
 font-weight: 600;
}
.bbb{
 float: left;
 color: #999999;
}
.shopnum{
 color: #ff9933;
 font-weight: 600;
}
.uls4b a{
 width: 70px;
 height: 61px;
 display: block;
 background: red;
 font-size: 14px;
 color: white;
 font-weight: 600;
 text-align: center;
 line-height: 60px;
}
.weight{
 margin-right: 60px;
}
.a666{
 cursor: pointer;
}
.fixed{
 position: fixed;
 width: 400px;
 height: 200px;
 background: white;
 z-index: 200;
 top:40%;
 left: 30%;
 border: 1px solid red;
 display: none;
}
.fixed p{
 width: 380px;
 height: 30px;
 background: red;
 font-size: 12px;
 color: white;
 line-height: 30px;
 padding-left: 20px;
}
.fixed span{
 display: block;
 color: #666666;
 margin-top: 20px;
 text-align: center;
}
.fixed button:nth-child(3){
 margin-left: 140px;
}
.fixed button{
 margin-right: 20px;
 border: none;
 width: 50px;
 height: 30px;
 margin-top: 50px;
 border: 1px solid red;
 color: red;
 background: white;
}

js部分

//基础加减
new Vue({
 el:"#content1",
 data:{
 add1:1,
 add2:2000,
 num1:1,
 num2:3000,
 num3:5000, //设置总价的最小值
 },
 methods:{
 add:function(inc,inc2,inc3){
 this.add1 += inc;
 this.add2 += inc2;
 this.num3 = this.add2 +this.num2;
 },
 sub:function(dec,dec2,dec3){
 this.add1 -= dec;
 this.add2 -= dec2;
 this.num3 = this.add2 +this.num2;
 if(this.add1 <= 1){
 this.add1 =1;
 }
 if(this.add2 <= 2000){
 this.add2 =2000;
 }
 if(this.num3 <= 5000){
 this.num3 =5000;
 }
 },
 numadd:function(mun1,mun2,mun3){
 this.num1 += mun1;
 this.num2 += mun2;
 this.num3 = this.add2 +this.num2;
 this.num3 = this.add2 +this.num2;
 },
 numsub:function(mun1,mun2,mun3){
 this.num1 -= mun1;
 this.num2 -= mun2;
 this.num3 = this.add2 +this.num2;
 if(this.num1 <= 1){
 this.num1 =1;
 }
 if(this.num2 <= 3000){
 this.num2 =3000;
 }
 if(this.num3 <= 5000){
 this.num3 =5000;
 }
 }, 
 }
});
 
 
$(function(){
 $(".b666").click(function(){
 var $this = $(this);
 $(".fixed").css("display","block");
 $(".sure").click(function(){
 $this.parent().css("display","none");
 $(this).parent().css("display","none");
 });
 $(".quxiao").click(function(){
 $(this).parent().css("display","none");
 });
 });
});
 
//全选
$("#all").click(function(){
 if($("#all[type='checkbox']").prop("checked") == true){ 
 $(".all").attr('checked', true);
 $(".chose").html(2);
 }else{
 $(".all").attr('checked', false); 
 $(".chose").html(0); 
 }
 });
$(".all1").click(function(){
 if($(".all1[type='checkbox']").prop("checked") == true){ 
 $(".chose").html(1);
 }else{
 $(".chose").html(0); 
 } 
});
$(".all2").click(function(){
 if($(".all2[type='checkbox']").prop("checked") == true){ 
 $(".chose").html(1);
 }else{
 $(".chose").html(0); 
 } 
}); 
 
$(".delete").click(function(){
 if($(".all[type='checkbox']").prop("checked") == false){
 return;
 }
 if($("#all[type='checkbox']").prop("checked") == true){
 $(".uls2").css("display","none");
 $(".chose").html(0);
 } 
});

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。

vue实现购物车小案例

- Author -

小羽向前跑

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
JavaScript Sort 表格排序
Oct 31 Javascript
ajax中get和post的说明及使用与区别
Dec 23 Javascript
JS通过分析userAgent属性来判断浏览器的类型及版本
Mar 28 Javascript
用于deeplink的js方法(判断手机是否安装app)
Apr 02 Javascript
js调用后台、后台调用前台等方法总结
Apr 17 Javascript
js简单实现点击左右运动的方法
Apr 10 Javascript
three.js加载obj模型的实例代码
Nov 10 Javascript
详解webpack之图片引入-增强的file-loader：url-loader
Oct 08 Javascript
JSON生成Form表单的方法示例
Nov 21 Javascript
Vue实现本地购物车功能
Dec 05 Javascript
JS实现长图上下滚动效果
Mar 19 Javascript
JavaScript实现动态生成表格
Aug 02 Javascript
解决layui中onchange失效以及form动态渲染失效的问题
Sep 27 #Javascript
layui 地区三级联动 form select 渲染的实例
Sep 27 #Javascript
vue实现移动端省市区选择
Sep 27 #Javascript
vue实现表单录入小案例
Sep 27 #Javascript
解决LayUI加上form.render()下拉框和单选以及复选框不出来的问题
Sep 27 #Javascript
layui form.render('select', 'test2') 更新渲染的方法
Sep 27 #Javascript
jquery 回调操作实例分析【回调成功与回调失败的情况】
Sep 27 #jQuery
SRF-S84(1) 森海(1) MX500(1) 南麂列岛(1) 根德(2) PL660(1) 松下(1) S2000(3) SRF-S83(1) 台湾(1)
You might like
PHP实现双链表删除与插入节点的方法示例
2017/11/11 PHP
一个对于js this关键字的问题
2007/01/09 Javascript
js 匿名调用实现代码
2009/06/19 Javascript
Javascript 类与静态类的实现
2010/04/01 Javascript
js自定义事件及事件交互原理概述(二)
2013/02/01 Javascript
thinkphp中常用的系统常量和系统变量
2014/03/05 Javascript
javascript trim函数在IE下不能用的解决方法
2014/09/12 Javascript
jquery $(document).ready()和window.onload的区别浅析
2015/02/04 Javascript
基于javascript实现图片懒加载
2016/01/05 Javascript
JS作用域闭包、预解释和this关键字综合实例解析
2016/12/16 Javascript
深入理解AngularJS中的ng-bind-html指令
2017/03/27 Javascript
基于Vue实现timepicker
2017/04/25 Javascript
bootstrap+jQuery实现的动态进度条功能示例
2017/05/25 jQuery
node文件批量重命名的方法示例
2017/10/23 Javascript
react实现菜单权限控制的方法
2017/12/11 Javascript
详解JavaScript 事件流
2020/09/02 Javascript
基于JQuery和DWR实现异步数据传递
2020/10/16 jQuery
在Python中处理日期和时间的基本知识点整理汇总
2015/05/22 Python
利用Python实现Windows定时关机功能
2017/03/21 Python
Python爬虫学习之翻译小程序
2019/07/30 Python
Python下opencv图像阈值处理的使用笔记
2019/08/04 Python
Tensorflow不支持AVX2指令集的解决方法
2020/02/03 Python
python之openpyxl模块的安装和基本用法（excel管理）
2021/02/03 Python
pytho matplotlib工具栏源码探析一之禁用工具栏、默认工具栏和工具栏管理器三种模式的差异
2021/02/25 Python
The Athlete’s Foot新西兰：新西兰最大的运动鞋零售商
2019/12/23 全球购物
爷爷追悼会答谢词
2014/01/24 职场文书
就业自我评价
2014/02/04 职场文书
招标授权委托书样本
2014/09/23 职场文书
个人党性分析材料
2014/12/19 职场文书
四年级学生期末评语
2014/12/26 职场文书
年会邀请函范文
2015/01/30 职场文书
劳保用品管理制度范本
2015/08/06 职场文书
关于远足的感想
2015/08/10 职场文书
80后创业总结的9条职场用人思想，记得收藏
2019/08/13 职场文书
关于Javascript闭包与应用的详解
2021/04/22 Javascript
VW、VH适配移动端的解决方案与常见问题
2023/05/21 HTML / CSS