购物车是一个商城程序的典型功能模块，之前使用jquery制作过，也使用angular开发过，今天将使用Vue实现购物车效果，使用的主要技术有vue+axios+mockJS等。

购物车的主要功能如下：

1. 勾选全选，所有商品全部选中。在取消全选框的时候所有商品取消选择。

2. 点击单个商品上的加号减号进行数量的增加和减少，右边小计实时计算出这个商品的价格合计。

3. 点击单个商品上的删除按钮将商品从购物车中删除。

4. 底部已选实时显示已经勾选的商品，右边合计金额实时显示所有勾选的商品的小计之和。

购物车的实现效果如图所示：

b05fe97c7e9045fc9b5a80489967e89b.jpeg

1、 HTML页面布局和css样式

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
table{
border-collapse:collapse;
float: left;
border:1px solid #999;
}
#btn{
background:#999;
color: #fff;
}
#shop{
list-style: none;
}
#shop li{
width: 400px;
height:150px;
border:1px solid #999;
}
#shop .p{
width:200px;
height:30px;
background:gray;
color: #fff;
text-align: center;
line-height:30px;
}
#shop .p1{
color:orange;
float: left;
}
#shop .p2{
color: #999;
float: left;
margin-left:10px;
}
#shop .p3{
clear: both;
}
</style>
</head>
<body>
<div id="app">
<ul id="shop">
<li v-for="item,index in plist" :key="item.id" id="li">
<p>{{item.title}}</p>
<p>&yen;{{item.sprice}}</p>
<p><del>&yen;{{item.price}}</del></p>
<p>
<span v-if="nums[item.id]">
<button @click="sub(item)">-</button>
{{nums[item.id]}}
</span>
<button @click="add(item)">+</button>
</p>
</li>
</ul>
<template v-if="car.length">
<table border="1px">
<tr v-for="item,index in car">
<td>{{item.title}}</td>
<td>
&yen;{{item.sprice}}
<del>&yen;{{item.price}}</del>
</td>
<td>
<button @click="carsub(index,item.id)">-</button>
{{nums[item.id]}}
<button @click="caradd(index,item.id,item.store)">+</button>
</td>
</tr>
</table>
<button @click="empty" id="btn">清空购物车</button>
总计:<b>&yen;{{itotal}}</b>
</template>
</div>
</body>
</html>

二、创建一个Vue对象，设置购物车数据属性

var vm = new Vue({
el:"#app",
data:{
plist:[],//存放列表数据
car:[],
nums:{},
buyed:[]
}
});

三、假设从后台请求到数据，然后赋值到Vue对象中

后台数据由mockjs模拟，使用axios发起请求获取数据

3.1 安装axios

npm install axios

3.2 请求url地址

var baseurl="http://axiostest.itsource.cn";

3.3 发起请求获取数据

created:function(){
var th = this;
//当vue实例化完成使用axios异步请求数据
axios.get(baseurl+'/plists').then(function(res){
th.plist=th.plist.concat(res.data.plists);
//console.log(res.data)
}).catch(function(err){
console.log(err)
});
}

3.4 mockjs拦截请求，模拟数据

var data = {
"list|10-20":
[
{
"id":"@guid",
"title":"@ctitle",
"price|1-100.2":0,
"sprice":function(){
return this.price-3;
},
"store|2-20":1
}
]
}

四、计算购物车的总价

computed:{
itotal:function(){
var total=0;
for(var i=0;i<this.car.length;i++){
total+=this.car[i].sprice*this.nums[this.car[i].id];
}
return total;
}
}

五、购物车中增加和减少数量

methods:{
//在购物车中增加数量
caradd:function(index,id,store){
//判断数量是否超过库存
if(this.nums[id]>store){
return;
}
//this.car[index].num+=1;//数量加1
this.nums[id]+=1;
this.$set(this.car,index,this.car[index]);
},
//在购物车中减少数量
carsub:function(index,id){
//数量少于1时,删除商品
if(this.nums[id]<=1){
this.car.splice(index,1);
this.buyed.splice(index,1);
delete this.nums[id];
return;
}
//this.car[index].num-=1;//商品-1
this.nums[id]-=1;
this.$set(this.car,index,this.car[index]);
}
}

六、添加商品，删除商品，清空购物车

methods:{
add:function(item){
if(this.buyed.indexOf(item.id)>=0){//判断商品是否已经添加了
for(var i=0;i<this.car.length;i++){
if(this.car[i].id==item.id){
if(this.nums[item.id]>item.store){
return ;
}
//this.car[i].num+=1;
this.nums[item.id]+=1;
this.$set(this.car, i, this.car[i]);
return;
}
}
return;//结束当前函数别的运行
}
//item.num = 1;
this.$set(this.nums,item.id,1);
this.buyed.push(item.id);
this.car.push(item);
},
sub:function(item){
for(var i=0;i<this.car.length;i++){
if(this.car[i].id==item.id){
if(this.nums[item.id]==1){
this.car.splice(i,1);
this.buyed.splice(i,1);
delete this.nums[item.id];
return;
}
this.car[i].num-=1;
this.nums[item.id]-=1;
this.$set(this.car,i,this.car[i]);
return;
}
}
},
empty:function(){
this.car=[];
this.buyed=[];
this.nums={};
}
}

      想要了解更多技术干货，可以关注“源码时代”官网！