在 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.mzph.cn/news/78604.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

不安全的反序列化(phpjava)及漏洞复现

不安全的反序列化 1. 序列化与反序列化 A8:2017-不安全的反序列化 A08:2021-Software and Data Integrity Failures 为什么要序列化? 序列化,将对象的状态信息转换为可以存储或传输的形式的过程,这种形式大多为字节流、字符串、json 串。…

怎么在树莓派上搭建WordPress博客网站,并发布到外网可访问?

文章目录 序幕概述1. 安装 PHP2. 安装MySQL数据库3. 安装 Wordpress4. 设置您的 WordPress 数据库设置 MySQL/MariaDB创建 WordPress 数据库 5. WordPress configuration6. 将WordPress站点发布到公网安装相对URL插件修改config.php配置 7. 支持好友链接样式8. 定制主题 序幕 …

OpenCV(四十一):图像分割-分水岭法

1.分水岭方法介绍 OpenCV 提供了分水岭算法(Watershed Algorithm)的实现, 使用分水岭算法对图像进行分割,将图像的不同区域分割成互不干扰的区域。分水岭算法模拟了水在图像中的扩散和聚集过程,将标记的边界被看作是阻…

Edge官方鼠标手势

前言 日期:2023年8月 Edge浏览器目前已自带官方的鼠标手势功能,若要使用首先将浏览器更新至最新版,下文介绍使用方法。 官方鼠标手势 前提 更新Edge至最新版,并关闭其它鼠标手势扩展。 开启鼠标手势 打开Edge浏览器的设置&…

NoSQL之redis持久化(RDB、AOF)

目录 一、Redis高可用 二、Redis持久化 1、持久化的功能 2、Redis的两种持久化 三、RDB 持久化 1、触发条件 1.1 手动触发 1.2 自动触发 1.3 其它自动触发机制 2、执行流程 3、启动时加载RED文件(恢复) 四、Redis的AOF持久化 1、开启AOF 2、执行流程 2.1 命令追加…

基于Qt5的计算器设计

Qt5的信号与槽 ✨描述:信号槽是 Qt 框架引以为豪的机制之一。所谓信号槽,实际就是观察者模式(发布-订阅模式)。当某个事件发生之后,比如,按钮检测到自己被点击了一下,它就会发出一个信号(signal&#xff09…

TSUMU58CDT9-1显示器芯片方案

TSUMU58CDT9-1是用于LCD显示器的整体解决方案图形处理IC,面板分辨率高达WUXGA。它配置了高速集成三adc /PLL、集成DVI/HDMI接收器、高质量显示处理引擎、集成微控制器和支持LVDS面板接口格式的输出显示接口。TSUMU58CDT9-1支持一个灵活的可配置数字输入接口&#xf…

动态SQL

Mybatis框架的动态SQL技术是一种根据特定条件动态拼装SQL语句的功能,它存在的意义是为了解决拼接SQL语句字符串时的痛点问题。 1、if if标签可通过test属性的表达式进行判断,若表达式的结果为true,则标签中的内容会执行;反之标签…

「Java」Java面试宝典:全面覆盖常见问题和难点解析

Java面试宝典:全面覆盖常见问题和难点解析 1. 怎么理解Spring MVC?2. 为什么说ConcurrentHashMap是线程安全的?3. 为什么说HashMap是线程不安全的?4. 遍历map的方法5. HashSet怎样处理重复的数据?6. HashSet 具备哪些特点?7. 什…

【MySQL系列】MySQL数据库索引详解

目录 一、为什么要用索引? 二、什么是索引? 三、MySQL索引使用场景 四、索引的原理 五、MySQL的存储引擎 六、索引的数据结构 七、索引如何使用 八、实际使用示例 九、优缺点、使用建议和注意事项 十、为什么Mysql不选择Hash索引? …

电脑死机的时候,CPU到底在做什么?

电脑死机,应该每个接触计算机的小伙伴都经历过吧。 尤其是早些年,电脑配置还没现在这么高的时候,多开几个重量级应用程序,死机就能如约而至,就算你把键盘上的CTRLALTDELETE按烂了,任务管理器也出不来&…

Linux基础入门

一、操作系统安装方法 1、使用u盘安装 工具&#xff08;前提条件&#xff09;&#xff1a; <1>u盘 <2>镜像文件iso/msdn.itellyou.cn <3>把u盘做成PE&#xff1a;大白菜/老毛桃/winPE/软碟通/ultralSO 设置BIOS&#xff1a;通过u盘启动 安装系统&…

什么是云存储,从对象存储说起?

在《存储系统形态之争,从块存储到统一存储》一文中我们提到了对象存储的概念,知道目前很多企业级存储都是支持对象存储的,比如EMC、NetApp和华为等。以EMC的对象存储为例,其最早在1998年就已经具备成熟的产品了,到目前已经有二十多年的历史了。如图是关于对象存储主要产品…

base64转为blob,然后转成file文件,具体步骤以及注释说明,以及使用案例

文章目录 1. 将base64字符串转为blob对象&#xff1a;2. 将blob对象转为file对象&#xff1a;3. 使用案例&#xff1a; 1. 将base64字符串转为blob对象&#xff1a; function convertBase64ToBlob(base64Str) {// 将base64字符串转为二进制数据const byteCharacters atob(bas…

《银河麒麟高级服务器操作系统V10》使用

一言而论&#xff1a;讲了麒麟服务器V10的基本使用&#xff0c;包括终端、VNC 文章目录 前言基本架构环境硬件环境软件环境 麒麟安装步骤1.在宿主机上安装好VM&#xff0c;并且激活2.使用VM创建虚拟机3.启动虚拟机 终端常用点VNC的使用麒麟上安装VNC服务器Windows上安装VNC客户…

09架构管理之工作量评估评审

一句话导读 在软件工程中&#xff0c;如何做到精准的预算评估&#xff0c;软件开发的工作量评估是很多项目开始的首要要素&#xff0c;它会影响到整个工程的预算、人员配置、进度管理&#xff0c;甚至是工程能否正常交付。那么如何保证工作量评估的准确性呢&#xff0c;那就要用…

【deepspeed】【训练】【交互】【wandb】训练过程中的wandb交互如何去除

问题&#xff1a;gpt模型训练时&#xff0c;中间有询问输入账户&#xff0c;交互式的询问影响自动执行脚本&#xff0c;询问是这样的&#xff1a; 解决办法&#xff1a; 在脚本中设置环境变量&#xff0c;关闭wandb&#xff0c;如下图&#xff1a; 其他&#xff1a; log中没有…

nslookup和dig的区别

nslookup是一个常用的网络工具&#xff0c;用于查询域名系统&#xff08;DNS&#xff09;的信息。它允许用户通过域名查找与之相关的IP地址、查询主机名和IP地址的映射关系&#xff0c;以及执行反向DNS查找等操作。下面是对nslookup的详细解释&#xff1a; 查询域名对应的IP地…

Mysql InnoDB引擎 的hash索引

Mysql InnoDB引擎不支持hash索引&#xff0c;但是在内存结构中有一个自适应hash索引&#xff0c;来提高查询性能 当设置hash索引时会自动转换成btree索引 查一下mysql官方文档&#xff1a;https://dev.mysql.com/doc/refman/5.7/en/create-index.html innodb_adaptive_hash_i…

第13篇:ESP32 idf wifi联网使用SNTP同步网络时间LCD ST7920液晶屏显示

第1篇:Arduino与ESP32开发板的安装方法 第2篇:ESP32 helloword第一个程序示范点亮板载LED 第3篇:vscode搭建esp32 arduino开发环境 第4篇:vscodeplatformio搭建esp32 arduino开发环境 ​​​​​​第5篇:doit_esp32_devkit_v1使用pmw呼吸灯实验 第6篇:ESP32连接无源喇叭播…