Vue watch监听数据

最新推荐文章于 2024-09-03 14:06:45 发布

Lvdon9

最新推荐文章于 2024-09-03 14:06:45 发布

阅读量333

点赞数 1

分类专栏： Vue

本文链接：https://blog.csdn.net/qq_37995109/article/details/88726913

版权

Vue 专栏收录该内容

53 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<script type="text/javascript" src="js/vue.js"></script>
		<title>Watch 选项 监控数据</title>
	</head>
	<body>
    <h1>Watch 选项 监控数据</h1>
    <hr>
    <div id="app">
    	<p>今日的温度:{{wendu}}</p>
    	<p>穿衣建议:{{chuanyi}}</p>
    	<p>
    		<button @click="shenggao">升高温度</button>
    		<button @click="jiangdi">降低温度</button>
    	</p>
    	
    </div>
    <script type="text/javascript">
    	var chuanyiArray=['T恤断袖','夹克长裙','棉衣羽绒服'];
        var app=new Vue({
            el:'#app',
            data:{
                wendu:14,
                chuanyi:'夹克长裙'
            },
            methods:{
            	shenggao(){
            		this.wendu+=5;
            	},
            	jiangdi(){
            		this.wendu-=5;
            	}
            },
            //监控数据改变
//          watch:{
//          	//新值和老值得变化
//          	wendu(newVal,oldVal){
//          		if(newVal>=26){
//          			this.chuanyi=chuanyiArray[0]
//          		}else if(newVal<26 && newVal>0){
//          			this.chuanyi=chuanyiArray[1]
//          		}else{
//          			this.chuanyi=chuanyiArray[2]
//          		}
//          	}
//          }
        })
        //在增加一个watch
        app.$watch('wendu',function(newVal,oldVal){
        
    		if(newVal>=26){
    			this.chuanyi=chuanyiArray[0]
    		}else if(newVal<26 && newVal>0){
    			this.chuanyi=chuanyiArray[1]
    		}else{
    			this.chuanyi=chuanyiArray[2]
    		}
            	
        })
    </script>
</body>
</html>