css部分
/* common */
body,div,dl,dt,dd,ul,li,h2,h3,h4,h5,h6,h7,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怎么实现购物车功能”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注创新互联行业资讯频道！
分享标题：vue怎么实现购物车功能
分享路径：http://kswjz.com/article/gjsphp.html
扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
