首页
所有分类
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事件热键兼容ie|firefox
Dec 30 Javascript
Fixie.js 自动填充内容的插件
Jun 28 Javascript
JavaScript生成随机字符串的方法
Mar 19 Javascript
JS实现弹性漂浮效果的广告代码
Sep 02 Javascript
BootStrap下拉框在firefox浏览器界面不友好的解决方案
Aug 18 Javascript
jQuery中on方法使用注意事项详解
Feb 15 Javascript
JavaScript中双符号的运算详解
Mar 12 Javascript
基于js中的原型(全面讲解)
Sep 19 Javascript
解决LayUI表单获取不到data的问题
Aug 20 Javascript
angularjs中判断ng-repeat是否迭代完的实例
Sep 12 Javascript
Vue2.0 $set()的正确使用详解
Jul 28 Javascript
微信小程序实现文件预览
Oct 22 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
iOS(1) DNA(2) 嘧啶碱基(2) 富碳陨石(1) RNA(2) iPhone(1) Athens(1) iOS15(1) 陨石(1) iOS16(1)
You might like
php+html5+ajax实现上传图片的方法
2016/05/14 PHP
js获取提交的字符串的字节数
2009/02/09 Javascript
用JavaScript显示随机图像或引用
2009/04/21 Javascript
基于JavaScript实现继承机制之构造函数+原型链混合方式的使用详解
2013/05/07 Javascript
JS定义回车事件(实现代码)
2013/07/08 Javascript
深入理解javascript的执行顺序
2014/04/04 Javascript
Html5的placeholder属性(IE兼容)实现代码
2014/08/30 Javascript
浅析Node.js查找字符串功能
2014/09/03 Javascript
js选项卡的实现方法
2015/02/09 Javascript
基于Bootstrap实现图片轮播效果
2016/05/22 Javascript
Vue2.0用 watch 观察 prop 变化(不触发)
2017/09/08 Javascript
Angular实现预加载延迟模块的示例
2017/10/12 Javascript
vue升级之路之vue-router的使用教程
2018/08/14 Javascript
详解微信小程序自定义组件的实现及数据交互
2019/07/22 Javascript
element-ui table行点击获取行索引（index）并利用索引更换行顺序
2020/02/27 Javascript
[06:53]2018DOTA2国际邀请赛寻真——勇于创新的Vici Gaming
2018/08/14 DOTA
用python登录Dr.com思路以及代码分享
2014/06/25 Python
python设置检查点简单实现代码
2014/07/01 Python
python对Excel按条件进行内容补充(推荐)
2019/11/24 Python
python如何通过twisted搭建socket服务
2020/02/03 Python
基于Python第三方插件实现西游记章节标注汉语拼音的方法
2020/05/22 Python
Win10下用Anaconda安装TensorFlow(图文教程)
2020/06/18 Python
video结合canvas实现视频在线截图功能
2018/06/25 HTML / CSS
汇集了世界上最好的天然和有机美容产品：LoveLula
2018/02/05 全球购物
Club Monaco加拿大官网：设计师男女服装
2019/09/29 全球购物
shell程序如何生命变量？shell变量是弱变量吗？
2014/11/10 面试题
前台接待的工作职责
2013/11/21 职场文书
高中语文教学反思
2014/01/16 职场文书
消防战士优秀事迹材料
2014/02/13 职场文书
师德师风个人反思
2014/04/28 职场文书
计算机应用专业毕业生求职信
2014/06/03 职场文书
党员对照检查材料
2014/09/22 职场文书
小学秋季运动会报道稿
2014/09/30 职场文书
房屋租赁委托书范本
2014/10/04 职场文书
重温入党誓词主持词
2015/06/29 职场文书
《水上飞机》教学反思
2016/02/20 职场文书