Vue学习日记之watch的使用

当我们在vue实例中需要监听data变化就需要用到watch了。

举个例子，当我们需要监听在输入框的值，使输入框的旧值和新值都显示出来，就需要watch了。

watch:{'data中的值':function  fn(newval,oldval){....}}

当监听的data值发生变化之后触发回调函数，这个回调函数有两个参数，newval----新的值，oldval----旧的值。

<div id="app">
  <input type="text" v-model="msg">
    <p>新的值是：</p>
    <input type="button" v-model="newmsg">
    <p>旧的值是：</p>
    <input type="button" v-model="oldmsg">
</div>


</body>

<script>

    /*
    * watch---监听data中的数据，当数据改变时，触发回调函数
    * */
   var vm=new Vue({
       el:'#app',
       data:{
           msg:'msg',
           newmsg:null,
           oldmsg:null
       },
       watch:{
           msg:function (newval,oldval) {
               this.newmsg=newval;
               this.oldmsg=oldval;
           }
       }
   })
</script>

运行结果：