一篇文章教你简单使用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属性的变化。

在这里插入图片描述

总结

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

相关文章

  • el-form表单el-form-item验证规则里prop一次验证两个或多个值问题

    el-form表单el-form-item验证规则里prop一次验证两个或多个值问题

    这篇文章主要介绍了el-form表单el-form-item验证规则里prop一次验证两个或多个值问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-05-05
  • vue项目中form data形式传参方式

    vue项目中form data形式传参方式

    这篇文章主要介绍了vue项目中form data形式传参方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-06-06
  • vue 实现列表跳转至详情且能添加至购物车功能

    vue 实现列表跳转至详情且能添加至购物车功能

    列表页面显示数据,点击跳转到对应的详情页,详情页可以添加并跳转到购物车,购物车具有常见功能,这篇文章主要介绍了vue 实现列表跳转至详情且能添加至购物车,需要的朋友可以参考下
    2022-10-10
  • Vue之定义全局工具类问题

    Vue之定义全局工具类问题

    这篇文章主要介绍了Vue之定义全局工具类问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-05-05
  • vue3 elementplus table合并写法

    vue3 elementplus table合并写法

    这篇文章主要介绍了vue3 elementplus table合并写法,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-06-06
  • 一文带你吃透Vue3编译原理

    一文带你吃透Vue3编译原理

    一直对编译原理的东西都有一种恐惧感,感觉太难了,看不懂,打开vue3源码看到编译相关的代码,直接吓退。不要担心,小编今天带你一文吃透Vue3编译原理
    2023-02-02
  • vue踩坑记录:属性报undefined错误问题

    vue踩坑记录:属性报undefined错误问题

    这篇文章主要介绍了vue踩坑记录:属性报undefined错误问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • vue3 setup语法糖各种语法新特性的使用方法(vue3+vite+pinia)

    vue3 setup语法糖各种语法新特性的使用方法(vue3+vite+pinia)

    这篇文章主要介绍了vue3 setup语法糖各种语法新特性的使用(vue3+vite+pinia),本文主要是记录vue3的setup语法糖的各种新语法的使用方法,需要的朋友可以参考下
    2022-09-09
  • vue element-ui动态横向统计表格的实现

    vue element-ui动态横向统计表格的实现

    这篇文章主要介绍了vue element-ui动态横向统计表格的实现方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-08-08
  • Vue项目Nginx子目录部署(Vite和Vue-CLI)

    Vue项目Nginx子目录部署(Vite和Vue-CLI)

    本文主要介绍了Vue项目Nginx子目录部署(Vite和Vue-CLI),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2024-05-05

最新评论