Vue—watch的简单用法
1.简单介绍 在vue中,使用 watch来监听数据 的变化。在改变的时候会有一个初始值,对初始值进行改变的时候,会把初始值记录下来,但同时也更新当前值。 举一个简单的例子(米与厘米的单位换算,在按下enter键的时候,alert我们换算的值) <body> <div id="app"> 米:<input type="text" v-model="mi" @keyup.enter="btn">= 厘米:<span>{{limi}}</span> </div> </body> <script> let myapp = new Vue({ el:"#app", data:{ mi:"", limi:"" }, methods:{ btn:function(){ this.limi = this.mi*100; } } }) // watch 监听数据.因为在按下enter键的时候才使用监听,所以我们对换算后的厘米进行监听 myapp.$watch('limi',function(){ alert(myapp.mi+'米'+'='+myapp.limi+'厘米') }) </script> 2.handler方法和immediate属性 使用watch时有一个特点,就是当值第一次绑定的时候,不会执行监听函数,只有值发生改变才会执行。如果我们需要在 最初绑定值的时候也执行函数