Vue.js监听属性

15 篇文章 0 订阅

监听属性:

    watch属性为Vue的监听属性,用来监听Vue实例中数据的变动。可以是data中定义的属性(也经常这么用),也可以时Vue自带的属性,比如$route。

    首先看示例:

    <div id = "app">

      <p style = "font-size:25px;">计数器: {{ counter }}</p>

         <button @click = "counter++" style = "font-size:25px;">点我</button>

    </div>

    <script type = "text/javascript">

      var vm = new Vue({

         el: '#app',

         data: {

            counter: 1,

              counter: 1

         },

      watch:{

       counter:function(val1,val2){

     console.log('val1: '+val1+', val2: '+val2);

                this.counter2++;

     },

            counter2:{

                handler:function(val1){

                    console.log('counter2: '+val1);

                },

                deep:false,

                immediate:true

            }

      }

     });

     vm.$watch('counter', function(nval, oval) {

        alert('计数器值的变化 :' + oval + ' 变为 ' + nval + '!');

     });

    </script>

    可以看出:watch是一个对象,其中的数据为键值对。

    键:要监听的数据。

    值:对应回调函数。可以是定义个匿名函数,如示例中counter对应的函数。有两个参数,第一个为改变后的值,第二个为改变前的值。第二个值可以省略。

        也可以是一个函数名,需要用单引号引上。(暂时不确定使用方式)

        也可以是一个对象,如示例所示,counter2的监听值为一个对象。该对象有三个属性:handler,就是对应的回调函数。deep,指定是否深度监听。immediate,指定是否已当前值执行回调。

        这三个属性并非全部必须。一般这种方式用来监听键为对象时,其中值的变动,需要进行深度监听。

    最后,vm.$watch(...)是主动调用$watch方法来进行数据的检测,同回调一样,在数据变动时调用。根据需要使用。

    

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值