码迷,mamicode.com
首页 > 其他好文 > 详细

Vue—watch的简单用法

时间:2019-11-28 01:19:36      阅读:139      评论:0      收藏:0      [点我收藏+]

标签:col   soft   immediate   更新   属性   特点   执行函数   简单介绍   mil   

 

 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时有一个特点,就是当值第一次绑定的时候,不会执行监听函数,只有值发生改变才会执行。如果我们需要在最初绑定值的时候也执行函数,则就需要用到immediate属性。

监听的数据后面写成对象形式,包含handler方法和immediate,之前我们写的函数其实就是在写这个handler方法;

immediate表示在watch中首次绑定的时候,是否执行handler,值为true则表示在watch中声明的时候,就立即执行handler方法,值为false,则和一般使用watch一样,在数据发生变化的时候才执行handler。

<div id="root">
    <input type="" name="" id="" value="" v-model="cityName"/>
</div>
var myapp =new Vue({
    el: ‘#root‘,
    data: {
        cityName: ‘成都‘
     },
   watch: {
      cityName: {
           handler(newName, oldName) {
               alert(newName)
         },
   
  immediate: true
    }
  }
})

 

Vue—watch的简单用法

标签:col   soft   immediate   更新   属性   特点   执行函数   简单介绍   mil   

原文地址:https://www.cnblogs.com/zengbisheng/p/11946525.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!