计算属性和watch侦听比较之购物车价格计算,实现价格满199减100

最新推荐文章于 2022-09-02 22:36:00 发布

俗世凡人行

最新推荐文章于 2022-09-02 22:36:00 发布

阅读量306

点赞数

分类专栏： Vue 文章标签：计算属性侦听 demo

本文链接：https://blog.csdn.net/weixin_41887155/article/details/107595047

版权

Vue 专栏收录该内容

56 篇文章 0 订阅

订阅专栏

购物车价格计算,实现价格满199减100

用计算属性实现;计算属性代码更简洁,更好;
用watch实现;要判断监听的几个变量,代码更冗余,可以实现,不太好;

eg

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			单价:<input type="text" v-model="price" /><br>
			数量:<input type="text" v-model="num" /><br>
			<!-- 计算属性 -->
			<p>总价: {{total}}</p>
			<p>watch总价: {{watchTotal}}</p>
		
		</div>
	</body>
</html>
<script type="text/javascript">	
	var vm = new Vue({	
		el:'#app',
		data:{	
			price:1,
			num:1,
			watchTotal:0     
		},
		computed:{
			total:function(){
				// 数量小于1时,重置为1
				if(this.num < 1)
				{
					this.num = 1;					
				}
				if(this.price <=0){
					this.price = 1;						
				}
				if(this.price * this.num > 199){
					return this.price * this.num - 100;
				}else{
					return this.price * this.num;
				}
			}
		},
		watch:{		
			price:function(){
				if(this.price * this.num >199){
					this.watchTotal=this.price * this.num - 100;
				}else{
					this.watchTotal=this.price * this.num
				}
				
			},
			num:function(){
				if(this.price * this.num >199){
					this.watchTotal=this.price * this.num - 100;
				}else{
					this.watchTotal=this.price * this.num
				}
			},		
			
		}		
		
	})	
	
</script>