//要引入vue.js同時還有axios.min.js
<script src="./homework/node_modules/vue/dist/vue.min.js"></script>
<script src="./homework/node_modules/axios/dist/axios.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<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>
<script src="./homework/node_modules/vue/dist/vue.min.js"></script>
<script src="./homework/node_modules/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="app">
<ul id="shop">
<li v-for="item,index in plist" :key="item.id" id="li">
<p class="p">{{item.title}}</p>
<p class="p1">¥{{item.sprice}}</p>
<p class="p2"><del>¥{{item.price}}</del></p>
<p class="p3">
<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>
<script>
//npm install axios安裝axios
var baseurl="http://www.easy-mock.com/mock/5a167443d8031f24f9a7a5f9/daojia";
//創建Vue實例
var vm = new Vue({
el:"#app",
data:{
plist:[],//存放列表數據
car:[],
nums:{},
buyed:[]
},
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]);
},
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={};
}
},
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)
});
}
})
//創建mock數據
var data = {
"list|10-20":
[
{
"id":"@guid",
"title":"@ctitle",
"price|1-100.2":0,
"sprice":function(){
return this.price-3;
},
"store|2-20":1
}
]
}
</script>
</body>
</html>
如何用vue.js寫購物車功能
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.