購物車是一個商城程序的典型功能模塊，之前使用jquery製作過，也使用angular開發過，今天將使用Vue實現購物車效果，使用的主要技術有vue+axios+mockJS等。
購物車的主要功能如下：
1. 勾選全選，所有商品全部選中。在取消全選框的時候所有商品取消選擇。
2. 點擊單個商品上的加號減號進行數量的增加和減少，右邊小計實時計算出這個商品的價格合計。
3. 點擊單個商品上的刪除按鈕將商品從購物車中刪除。
4. 底部已選實時顯示已經勾選的商品，右邊合計金額實時顯示所有勾選的商品的小計之和。
購物車的實現效果如圖所示：
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>¥{{item.sprice}}</p>
<p><del>¥{{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>
¥{{item.sprice}}
<del>¥{{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>¥{{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={};
}
}
想要了解更多技術乾貨，可以關注“源碼時代”官網！