当前位置: 首页 > news >正文

在 Vue.js 中,使用 watch 监听data变量如:对象属性/data变量

 watch 监听对象属性

在 Vue.js 中,使用 `watch` 监听对象属性的变化时,应该将属性名作为字符串传递给 `watch` 选项。

示例如下:

```javascript

watch: {'addform.isCheck1': function(newValue) {console.log(newValue);var quantity = this.addform.quantity;if (quantity % 2 === 0) {quantity = quantity / 2;} else {quantity = (quantity - 1) / 2;}this.updateAddChuZhenForm("上午", quantity, newValue);},'addform.isCheck2': function(newValue) {var quantity = this.addform.quantity;if (quantity % 2 === 0) {quantity = quantity / 2;} else {quantity++;quantity = quantity / 2;}this.updateAddChuZhenForm("下午", quantity, newValue);}
},

updateAddChuZhenForm函数

//检查数组中是否已存在具有相同 sign 标识的对象。如果存在,它会更新对象的选中状态;如果不存在,它会添加一个新对象。如果取消选中,它会在数组中查找并删除相应的对象。updateAddChuZhenForm(sign, quantity, isChecked) {console.log(quantity);const existingIndex = this.addChuZhenForm.findIndex((obj) => obj.sign === sign);if (isChecked) {if (existingIndex === -1) {this.addChuZhenForm.push({department_id: this.addform.department_id,room_id: this.addform.room_id,doctor_id: this.addform.doctor_id,inquiry_time: this.addform.inquiry_time,quantity: quantity,sign: sign,});}} else {if (existingIndex !== -1) {this.addChuZhenForm.splice(existingIndex, 1);}}},

现在,当 `isCheck1` 或 `isCheck2` 的值发生变化时,相应的 `watch` 函数将被触发。
```

watch监听data变量

如果你想要监听一个普通变量,而不是 Vue 实例的属性,你可以使用 `watch` 选项以及直接在 `data` 中声明这个变量。

比如:如果你想监听一个名为 `variableToWatch` 的变量,可以这样做:

```javascript

data() {return {// 其他的data属性variableToWatch: false,};
},
watch: {variableToWatch(newValue) {// 在这里可以处理变量变化的逻辑console.log('变量的值变为:', newValue);}
},

在上述例子中,我们在 `data` 中声明了一个变量 `variableToWatch`,并在 `watch` 选项中监听了它的变化。当 `variableToWatch` 的值发生变化时,相应的 `watch` 函数将被触发。
```

如果你希望在组件加载后就立即监听该变量,你可以在 `created` 生命周期钩子中手动调用一次 `watch` 函数:

```javascript

created() {this.$watch('variableToWatch', (newValue) => {console.log('变量的值变为:', newValue);});
}

这样,在组件创建后,`variableToWatch` 的初始值也会被监视。
```

http://www.lryc.cn/news/166530.html

相关文章:

  • vue中预览xml并高亮显示
  • MFC中嵌入显示opencv窗口
  • 金鸣识别网页版:轻松实现表格识别的神器
  • DasViewer可以设置打开指定文件吗?
  • uniapp微信小程序用户隐私保护指引弹窗组件
  • Java的反射应用(Method和Class)
  • Java之泛型系列--Class使用泛型的方法(有示例)
  • 【【无用的知识之串口学习】】
  • 9月13日上课内容 第三章 ELK日志分析系统
  • 不知道有用没用的Api
  • (2023,LENS 视觉模型 LLM)迈向可见的语言模型:通过自然语言的镜头来看计算机视觉
  • 线段树上树剖再拿线段树维护:0914T4
  • 互联网医院系统|互联网医院探索未来医疗的新蓝海
  • Acrel-2000系列监控系统在亚运手球比赛馆建设10kV供配电工程中的应用
  • c++中遇到一个不了解的函数,查看能用的接口功能
  • windows linux子系统 docker无法启动
  • 【Redis】深入探索 Redis 的数据类型 —— 无序集合 Set
  • 可变参数JAVA
  • Zabbix监控平台部署流程
  • 重磅!文晔以38亿美元收购富昌电子 | 百能云芯
  • Multimodel Image synthesis and editing:The generative AI Era
  • Linux——(第十章)进程管理
  • 【操作系统】聊聊协程为什么可以支撑高并发服务
  • 算法leetcode|80. 删除有序数组中的重复项 II(rust重拳出击)
  • Vite 完整版详解
  • AI入门指南:探索人工智能的基础原理和实际应用
  • 使用 Webpack 从 0 到 1 构建 Vue3 项目 + ts
  • 【Git】Git 分支
  • .NET Upgrade Assistant 升级 .NET MAUI
  • 记一次诡异的Cannot find declaration to go to,Cannot resolve method