邻近的小程序的改版_vue完成购物车小案例

vue实现购物车小案例       这篇文章主要为大家详细介绍了vue实现购物车小案例,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

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

最终效果

HTML部分:

 !doctype html 
 html lang="en" 
 head 
 meta charset="UTF-8" 
  /title 
 script src="npm/vue" /script 
 script src="npm/vue/dist/vue.js" /script 
 link rel="stylesheet" href="css/shopcar.css" 
 script src="js/shopcar.js" /script 
 /head 
 body 
 div id="content1" 
 div 
 input type="checkbox" id="all" 
 p 全选 /p 
 p 商品 /p 
 p 单价 /p 
 p 数量 /p 
 p 小计 /p 
 p 操作 /p 
 /div 
 div 
 input type="checkbox" 
 p 京东自营 /p 
 /ul 
 p 满赠 /p 
 a href="#" 活动商品满19,即可领取商品一件 /a 
 p 查看赠品 /p 
 a href="#" 去凑单 /a 
 /ul 
 ul id="box" 
 input type="checkbox" 
 a href="#" 
 img src="img/aaa.jpg" alt="" 
 p OPPO R11全网通双卡双待 64G 32G br 手机 玫瑰金色 /p 
 p i id="weight" ¥2000 /i /p 
 button @click="sub(1,2000)" - /button 
 input ref="add1" type="text" v-model="add1" 
 button @click="add(1,2000)" + /button 
 p i id="xiaoji1" ¥{{add2}} /i /p 
 p 删除 /p 
 p 移到我的关注 /p 
 p 加到我的关注 /p 
 /ul 
 ul id="box2" 
 input type="checkbox" 
 a href="#" 
 img src="img/bbb.jpg" alt="" 
 p OPPO R11全网通双卡双待 64G 32G br 手机 玫瑰金色 /p 
 p i id="weight" ¥3000 /i /p 
 button @click="numsub(1,3000)" - /button 
 input ref="num1" type="text" v-model="num1" 
 button @click="numadd(1,3000)" + /button 
 p i id="xiaoji1" ¥{{num2}} /i /p 
 p 删除 /p 
 p 移到我的关注 /p 
 p 加到我的关注 /p 
 /ul 
 div 
 div 
 input type="checkbox" 
 a href="#" 删除选中商品 /a 
 a href="#" 移到我的关注 /a 
 a href="#" 清除下柜商品 /a 
 /div 
 div 
 div 
 div 
 div 
 p 已选择 i 0 /i 件商品^ /p 
 p 总价: span ¥ /span i {{num3}} /i /p 
 /div 
 p 已节省:¥- 00.0 /p 
 /div 
 /div 
 div 
 " rel="external nofollow" 去结算 /a 
 /div 
 /div 
 /div 
 /div 
 /div 
 div 
 p 京东商城 /p 
 span 您确认删除吗? /span 
 button 确认 /button 
 button 取消 /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;
 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 #;
 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 #;
 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 #;
 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 #;
 border-bottom: 1px solid #;
 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;

if($("#all[type='checkbox']").prop("checked") == true){ $(".all").attr('checked', true); $(".(2); }else{ $(".all").attr('checked', false); $(".(0); $(".all1").click(function(){ if($(".all1[type='checkbox']").prop("checked") == true){ $(".(1); }else{ $(".(0); $(".all2").click(function(){ if($(".all2[type='checkbox']").prop("checked") == true){ $(".(1); }else{ $(".(0); $(".delete").click(function(){ if($(".all[type='checkbox']").prop("checked") == false){ return; if($("#all[type='checkbox']").prop("checked") == true){ $(".uls2").css("display","none"); $(".(0); });

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


内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://zzjzptp.cn/ziyuan/3264.html