vue2.0中watch用法


watch:
观测Vue实例上的数据变动,对应一个对象,
键:就是需要监测的那个东西,
值:

1.可以是当键变化时执行的函数,有两个参数,第一个是变化前的值,第二个是变化后的值。
2.可以是函数名,得用单引号包裹。
3.可以是一个对象,这个对象有三个选项:
(1)handler :一个回调函数,监听到变化时应该执行的函数。
(2)deep :boolean值,是否深度监听。(一般监听时是不能监听到对象属性值的变化的,数组的变化可以听到)
(3)immediate :boolean值,是否立即执行handler函数。

watch的三种情况:
1. 普通的watch:

  el:'#app',

    data:{

        meter:1000,

        kilameter:1

    },

    watch:{

        meter:function(val){

            this.kilameter = val * 0.1;

        },

        kilameter:function(val){

            this.meter = val *1000;

        }

    }

})

 



  

2.数组的watch:

    el:'#app',

    data:{

        arr:[1,2,3]

    },

    watch:{

        arr:function(oldV,newV){

            console.log(oldV);

            console.log(newV);     

        }

    }

})

 





3.对象的watch:

    el:'#app',

    data:{

        obj : {

            a:111,

            b:222

        }  

    },

    watch:{

        obj:{

            handler:function(oldV,newV){

                console.log(oldV);

            },

            deep:true

        }

    }

)

 





免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM