vue中的watch侦听器

1、概念:

watch 侦听器允许开发者监视数据的变化,从而针对数据的变化做特定的操作。

2、语法格式:

在这里插入图片描述

3、示例

3-1、

一个input输入框,然后双向绑定v-mdel

在这里插入图片描述

在输入框中输入内容,点开vue的调试工具(Devtools),data中的数据也随之改变,
直接在data中修改数据,input框中的内容也会相应改变

在这里插入图片描述

3-2、

定义watch侦听器,侦听username值的变化

在这里插入图片描述

只要在input框中输入内容,watch侦听器侦听到了username数据的变化则控制台打印出结果

在这里插入图片描述

注意:newVal 和 oldVal 的顺序不能错,newVal 在前面!

3-3、

需求:判断用户名是否被占用了

在这里插入图片描述
在这里插入图片描述

3-4、

优化:一进入页面watch侦听器就自动触发一次
在这里插入图片描述

结果:

在这里插入图片描述
注意:
1.方法格式的侦听器

  • 缺点1:无法在刚进入页面的时候,自动触发。
  • 缺点2:如果侦听的是一个对象,如果对象中的属性发生了变化,不会触发侦听器。

2.对象格式的侦听器

  • 好处1:可以通过 immediate 选项,让侦听器自动触发。
  • 好处2:可以通过 deep 选项,让侦听器深度监听对象中每个属性的变化

首选方法格式的侦听器&#x

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值