详解vue.js中watch的使用


本文摘自PHP中文网,作者青灯夜游,侵删。

在vue中,使用watch来响应数据的变化。watch的用法大致有三种。下面代码是watch的一种简单的用法:

1

<input type="text" v-model="cityName"/>

1

2

3

4

5

6

7

8

9

10

11

new Vue({

  el: '#root',

  data: {

    cityName: 'shanghai'

  },

  watch: {

    cityName(newName, oldName) {

      // ...

    }

  }

})

直接写一个监听处理函数,当每次监听到 cityName 值发生改变时,执行函数。也可以在所监听的数据后面直接加字符串形式的方法名:

1

2

3

4

watch: {

    cityName: 'nameChange'

    }

 }

immediate和handler

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

比如当父组件向子组件动态传值时,子组件props首次获取到父组件传来的默认值时,也需要执行函数,此时就需要将immediate设为true。

1

2

3

4

5

6

7

8

9

10

11

12

13

14

new Vue({

  el: '#root',

  data: {

    cityName: ''

  },

  watch: {

    cityName: {

      handler(newName, oldName) {

        // ...

      },

      immediate: true

    }

  }

})

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

阅读剩余部分

相关阅读 >>

vue.js中使用插槽将数据从父组件传递到子组件

css中display: inline-block的用法解析

vue项目中引入bootstrap的方法

vue.js如何上传文件

vue.js支持jquery吗?

彻底理解css中视觉格式化模型(附示例)

vue.js有哪些ui

vue.js支持哪些浏览器

vue.js支持移动端吗

vue.js图片怎么渲染

更多相关阅读请进入《vue.js》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...