vue实现购物车小案例

2020-06-12 20:52:56易采站长站整理

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;