Vue之computed、watch在价格变动中的应用

最新推荐文章于 2023-10-30 16:57:21 发布

Mr.ZKH

最新推荐文章于 2023-10-30 16:57:21 发布

阅读量191

点赞数

分类专栏： Vuejs

本文链接：https://blog.csdn.net/weixin_44415461/article/details/97273174

版权

Vuejs 专栏收录该内容

41 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>选项</title>
	<script src="js/vue.min.js"></script>
</head>
<body>
	<h1>选项</h1>
	<hr/>
	<div id="app">
		<p>原价:￥{{prevPrice}}</p>
		<p>折扣:{{sale}}</p>
		<p>现价:{{newPrice}}</p>
		<button @click="plus">+</button>
		<button @click="min">-</button>
	</div>
</body>
<script>
	var vm = new Vue({
		el: '#app',
		data: {
			prevPrice: 10,
			sale: 0.8
		},
		//计算
		computed: {
			newPrice: function(){
				return '￥' + this.prevPrice*this.sale;
			}
		},
		//方法
		methods: {
	        plus: function(){
	       	    this.prevPrice++;
	        },
	        min: function(){
	       	    this.prevPrice--;
	        }
		},
        //监控第一种方式
       /* watch: {
        	//newVal修改之后的值  old修改之前的值
             prevPrice: function(newVal,old){
             	if(newVal < 1){
                   this.prevPrice=1;
             	}
             }
        }*/
	})
        //监控第二种方式
        vm.$watch("prevPrice",function(newVal,old){
           if(newVal < 1){
           	  this.prevPrice = 1;
           }
        })
</script>
</html>

运行效果图:
在这里插入图片描述

Mr.ZKH

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Vue之computed、watch在价格变动中的应用

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>选项</title> <script src="js/vue.min.js"></script></head><body> &l...
复制链接

扫一扫