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);
 } 
});

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

Javascript 相关文章推荐
斜45度寻路实现函数
Aug 20 Javascript
JS实现判断滚动条滚到页面底部并执行事件的方法
Dec 18 Javascript
前端js实现文件的断点续传 后端PHP文件接收
Oct 14 Javascript
JS中Select下拉列表类(支持输入模糊查询)功能
Jan 17 Javascript
js+css3实现旋转效果
Jan 20 Javascript
利用JS对iframe父子(内外)页面进行操作的方法教程
Jun 15 Javascript
JavaScript字符串_动力节点Java学院整理
Jun 27 Javascript
解决VUE框架 导致绑定事件的阻止冒泡失效问题
Feb 24 Javascript
vue移动端html5页面根据屏幕适配的四种解决方法
Oct 19 Javascript
vue webpack打包后图片路径错误的完美解决方法
Dec 07 Javascript
JsonServer安装及启动过程图解
Feb 28 Javascript
vue组件是如何解析及渲染的?
Jan 13 Vue.js
解决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
You might like
php字符串截取问题
2006/11/28 PHP
php计算当前程序执行时间示例
2014/04/24 PHP
ThinkPHP表单自动提交验证实例教程
2014/07/18 PHP
jQuery+PHP实现的掷色子抽奖游戏实例
2015/01/04 PHP
php遍历树的常用方法汇总
2015/06/18 PHP
适合PHP初学者阅读的4本经典书籍
2016/09/23 PHP
php实现表单提交上传文件功能
2018/05/28 PHP
IE6 弹出Iframe层中的文本框“经常”无法获得输入焦点
2009/12/27 Javascript
JS的get和set使用示例
2014/02/20 Javascript
JQuery实现简单的服务器轮询效果实例
2016/03/31 Javascript
jQuery实现可编辑表格并生成json结果(实例代码)
2017/07/19 jQuery
vue引入新版 vue-awesome-swiper插件填坑问题
2018/01/25 Javascript
微信小程序实现YDUI的ScrollTab组件
2018/02/02 Javascript
微信小程序实现弹出层效果
2020/05/26 Javascript
Vue-cli3简单使用(图文步骤)
2019/04/30 Javascript
使用Layer组件弹出多个对话框(非嵌套)与关闭及刷新的例子
2019/09/25 Javascript
原生js实现随机点餐效果
2019/12/10 Javascript
angular组件间通讯的实现方法示例
2020/05/07 Javascript
JavaScript实现五子棋小游戏
2020/10/26 Javascript
讲解python参数和作用域的使用
2013/11/01 Python
python简单实现基于SSL的IRC bot实例
2015/06/15 Python
Python数据分析库pandas基本操作方法
2018/04/08 Python
Python3使用turtle绘制超立方体图形示例
2018/06/19 Python
python ChainMap 合并字典的实现步骤
2019/06/11 Python
python实现计算器功能
2019/10/31 Python
Django集成celery发送异步邮件实例
2019/12/17 Python
html5 Canvas画图教程(1)—画图的基本常识
2013/01/09 HTML / CSS
加拿大约会网站:EliteSingles.ca
2018/01/12 全球购物
英国信箱在线鲜花速递公司:Bloom & Wild
2019/03/10 全球购物
大学生找工作推荐信范文
2013/11/28 职场文书
军神教学反思
2014/02/04 职场文书
个人安全生产承诺书
2014/05/22 职场文书
监考失职检讨书
2015/01/26 职场文书
数学备课组工作总结
2015/08/12 职场文书
早恋主题班会
2015/08/14 职场文书
详解Python requests模块
2021/06/21 Python