一篇文章教你简单使用Vue的watch侦听器

 更新时间:2021年12月08日 15:51:44   作者:wait......  
这篇文章主要为大家介绍了Vue watch侦听器,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助

侦听器watch 

  • 函数名就是要侦听的元素的名字
  • 传入的参数第一个是变化后的新值newval,第二个是变化前的旧值oldval 

格式

方法格式的侦听器

  • 无法在刚进入页面时自动触发,只有在侦听到变化才会触发
  • 如果侦听的是对象,当对象的属性发生变化时,不会侦听到

对象格式的侦听器

  • 通过immediate选项,可以让侦听器自动触发
  • 通过deep选项,使侦听器深度侦听到对象中属性的变化

这是Vue实例中的data对象:

在这里插入图片描述

设置侦听器:

下面分别是方法格式的侦听器和对象格式的侦听器:

方法格式的侦听器实现的是,当input中内容变化时,触发侦听,侦听input中的内容(内容是与tem绑定好的),如果当前input中的内容不在already数组中,就添加到already中,否则弹出提示框该名称已存在

对象格式的侦听器实现的是,页面一旦载入就立即触发侦听,侦听foo对象name属性的变化。

在这里插入图片描述

总结

本篇文章就到这里了,希望能够给你带来帮助,也希望您能够多多关注脚本之家的更多内容!

相关文章

  • vue项目实战总结篇

    vue项目实战总结篇

    离放假还有1天,今天小编抽空给大家分享前端时间小编做的vue项目,非常完整,需要的朋友参考下
    2018-02-02
  • 详解vue+webpack+express中间件接口使用

    详解vue+webpack+express中间件接口使用

    这篇文章主要介绍了详解vue+webpack+express中间件接口使用,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-07-07
  • VUE 解决mode为history页面为空白的问题

    VUE 解决mode为history页面为空白的问题

    今天小编就为大家分享一篇VUE 解决mode为history页面为空白的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-11-11
  • vue-cli4.x创建企业级项目的方法步骤

    vue-cli4.x创建企业级项目的方法步骤

    这篇文章主要介绍了vue-cli4.x创建企业级项目的方法步骤,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-06-06
  • vue实现全选和反选功能

    vue实现全选和反选功能

    这篇文章主要为大家详细介绍了vue实现全选和反选功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-08-08
  • vue-music关于Player播放器组件详解

    vue-music关于Player播放器组件详解

    这篇文章主要为大家详细介绍了vue-music关于Player播放器组件的相关资料,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-11-11
  • vue购物车插件编写代码

    vue购物车插件编写代码

    这篇文章主要为大家详细介绍了vue购物车插件的编写代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-11-11
  • vue+webpack模拟后台数据的示例代码

    vue+webpack模拟后台数据的示例代码

    这篇文章主要介绍了vue+webpack模拟后台数据的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-07-07
  • vue3.0实现复选框组件的封装

    vue3.0实现复选框组件的封装

    这篇文章主要为大家详细介绍了vue3.0实现复选框组件的封装代码,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-09-09
  • vue axios拦截器常用之重复请求取消

    vue axios拦截器常用之重复请求取消

    我们大家在开发中,经常会遇到接口重复请求导致的各种问题,下面这篇文章主要给大家介绍了关于axios拦截器之重复请求取消的相关资料,需要的朋友可以参考下
    2021-09-09

最新评论