vue 监视属性

<div id="root">
    <h2>今天天气很{{info}}</h2>
    <button @click="changeWeather">切换天气</button>
    <hr/>
    <h3>a的值是{{numbers.a}}</h3>
    <button @click="add">点我让a+1</button>
    <h3>b的值是{{numbers.b}}</h3>
    <button @click="numbers.b++">点我让b+1</button>
</div>
const vm = new Vue({ data(){ return{isHot:true, numbers:{a:1,b:1} }},
       computed:{
        info(){
            return this.isHot?'炎热':'凉爽'
        }
       },
       
       methods: {
        changeWeather(){
            this.isHot = !this.isHot //取反
        },
        add(){this.numbers.a ++}
       },
       
       watch:{
        info:{  //handler函数将在isHot/info被修改时调用,同时返回修改前后的值
            handler(newValue,oldValue){
                console.log('info被修改了',newValue,oldValue)
            }
        },
        'numbers.a':{ //这种还要带.的var要记得带引号
            handler(newValue,oldValue){
                console.log('a改变了',newValue,oldValue)
            }
        },
        numbers:{
            deep:true,     //深度监视,numbers中的任意元素(a或b)发生改变时,numbers会被监视到。
            handler(){
                console.log('numbers改变了')
            }
        }

       },
    })

在vm中新建一个 watch 的类,类中的元素为被监视的对象,该元素也是一个类,类中包含一个handler(newValue,oldValue){console.log()}函数,可以将数据改变的情况写出来。

posted @   萝卜薰  阅读(3)  评论(0编辑  收藏  举报
努力加载评论中...
点击右上角即可分享
微信分享提示