vuejs实现购物车满多少减多少

vuejs实现购物车满20元减5元

之前做了个vuejs的购物车的小dome,其中有一个需求就是。如果用户购买商品的总价格达到20元的时候，总价格就减免5元。

---

直接上代码：
html代码

<div id="app">
		<p>苹果</p>
		<p>数量：{{n}}</p>
		<p>价格：{{price}}</p>
		<p>应付：{{cleTotal}}</p>
		<p><button @click="add">+</button></p>
	</div>

js代码

let app = new Vue({
			el:"#app",
			data:{
				n:1,        //数量
				price:2,    //单价
				cleTotal:2, //总计
			},
			methods:{
				add(){
					this.n++;
				}
			},
			watch:{
				n:function(oval,nval){
					this.cleTotal = this.n*this.price;
				},
				cleTotal:function(nval,oval){
				//这儿的判断需要注意的是：如果没有这个判断。在满20减5之后 如果用户再点击+按钮。
				//再达到20还会减5   也就是只让它减一次的作用
					if(nval>oval){
						if(nval>=20){
							this.cleTotal=this.cleTotal-5;	
						}
					}
				}
			}
		})

需要注意的是。我们一般做时候在计算总价钱的时候使用comptued方法。在这里如果是做满减我这里使用watch方法。watch方法和comptued实际上是或的关系 用了watch方法就不能用computed方法。
好了，就分享到这里。水平有限，如果有不对的地方，欢迎大神们在评论区评论。