<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
ul{
list-style: none;
}
</style>
</head>
<body>
<div id="warp">
<ul>
<li v-for="(item,index) in goodsArr">
{{item.name}}---{{item.price}}元---
<button @click="subtractAction(index)">➖</button>
<input type="text" v-model="item.count" />
<button @click="addAction(index)">➕</button>
</li>
</ul>
<!--邮费:{{postage}} 应付价:{{pay}}元-->
<h3>总价:{{total}}
折后价:{{discount}}
满减:{{deducePrice}}
邮费:{{postage}}
应付价:{{pay}}元
</h3>
</div>
</body>
</html>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
/*买2件8.8折 买4件7.8折 500-50 700—100
邮费:20 满399包邮 为您优惠了:? 求应付:? */
var warp = new Vue({
el:'#warp',
data:{
goodsArr:[
{'name':'牛肉干','price':88,'count':0},
{'name':'萝卜干','price':99,'count':0},
{'name':'龙眼干','price':66,'count':0},
{'name':'青菜干','price':28,'count':0},
{'name':'番薯干','price':38,'count':0}
],
},
computed:{
// 商品总数目
countAll(){
var count = 0;
this.goodsArr.map((item)=>{
count += item.count;
})
return count;
},
// 商品总价
total(){
var tmp = 0;
this.goodsArr.map((item)=>{
tmp += item.price * item.count;
})
return tmp;
},
// 折后价
discount(){
// 2到4件商品8.8折
if (2<=this.countAll&&this.countAll<4) {
return Math.round(this.total * 88)/100;
// 4+件7.8折
}else if(this.countAll>=4){
return Math.round(this.total * 78)/100;
}else{
return this.total;
}
},
// 满减
deducePrice(){
var tmp = this.discount
// 如果打完折的价格在500~700间减50
if (tmp>=500&&tmp<700) {
return Math.round((tmp - 50)*100)/100;
// 大于700减100
}else if(tmp>=700){
return Math.round((tmp - 100)*100)/100;
}else{
return tmp;
}
},
// 邮费
postage(){
var tmp = this.deducePrice;
// 如果在1-399间20邮费
if (tmp<399&&tmp>0) {
return 20;
// 超过399包邮
}else{
return 0;
}
},
// 应付
pay(){
return this.deducePrice + this.postage;
}
},
methods:{
subtractAction(index){
this.goodsArr[index].count--;
},
addAction(index){
this.goodsArr[index].count++;
}
}
})
</script>
vue购物车的小应用
猜你喜欢
转载自blog.csdn.net/qq_36245035/article/details/81203819
今日推荐
周排行