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

Vue3 监听属性-watch

news 2025/7/2 13:50:41

文章目录

  • Vue3 监听属性-watch
    • 1. 概念
    • 2. 实例
      • 2.1 通过使用 watch 实现计数器
      • 2.2 千米与米之间的换算
      • 2.3 异步加载中使用 watch
      • 2.4 小计

Vue3 监听属性-watch

1. 概念

Vue3 监听属性 watch，可以通过 watch 来响应数据的变化。

  • watch 的作用：用于监测响应式属性的变化，并在属性发生改变时执行特定的操作，它是 Vue 中的一种响应式机制，允许你在数据发生变化时做出相应的响应，执行自定义的逻辑。

  • watch 使得在响应式属性变化时能够有更多的控制权和灵活性，让你的组件能够更好地响应数据的变化并执行相应的逻辑。

2. 实例

2.1 通过使用 watch 实现计数器

监听器的使用语法：类似于Java中的

vm.$watch('counter', function (newValue, oldValue) {alert('计数器值的变化：' + oldValue + '变为' + newValue + '!!!')});

vm.$watch('counter',(newValue, oldValue)=>{alert('计数器值的变化：' + oldValue + '变为' + newValue + '!!!')});

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>Vue 测试实例 监听属性Watch</title><script src="https://cdn.staticfile.org/vue/3.2.36/vue.global.min.js"></script>
</head>
<body>
<!--创建一个id为app class为demo的div-->
<div id="app" class="demo"><p style="font-size: 25px;">计数器：{{ counter }}</p>
<!--    定义按钮 点击实现计数器+1--><button @click="counter++" style="font-size: 25px;">点我</button>
</div><script>//    定义Vue3的HelloVueApp应用const HelloVueApp = {// 设置返回值counterdata() {return {counter: 0}}}// 创建HelloVueApp应用，mount('#app') 将 Vue 应用 HelloVueApp 挂载到 <div id="app" class="demo">中vm = Vue.createApp(HelloVueApp).mount('#app')
//     使用监听属性watch监听counter的变化 只要counter发生变化弹出窗口
//     vm.$watch('counter', function (newValue, oldValue) {
//         alert('计数器值的变化：' + oldValue + '变为' + newValue + '!!!')
//     });vm.$watch('counter',(newValue, oldValue)=>{alert('计数器值的变化：' + oldValue + '变为' + newValue + '!!!')});</script>
</body>
</html>

页面效果：点击按钮会弹出弹框，提示值的变化情况
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

2.2 千米与米之间的换算

  • 创建两个输入框

  • data 属性中， kilometers 和 meters 初始值都为 0。

  • watch 对象创建了 data 对象的两个监控方法： kilometers 和 meters。

    当我们在输入框输入数据时，watch 会实时监听数据变化并改变自身的值。

    <!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>Vue 测试实例 - 监听属性Watch </title><script src="https://cdn.staticfile.org/vue/3.2.36/vue.global.min.js"></script>
</head>
<body>
<!--以上代码中我们创建了两个输入框，data 属性中， kilometers 和 meters 初始值都为 0。
watch 对象创建了 data 对象的两个监控方法： kilometers 和 meters。
当我们在输入框输入数据时，watch 会实时监听数据变化并改变自身的值。-->
<div id = "app">千米 : <input type = "text" v-model = "kilometers"  @focus="currentlyActiveField = 'kilometers'">米 : <input type = "text" v-model = "meters" @focus="currentlyActiveField = 'meters'"><p id="info"></p>
</div><script>const app = {data() {return {kilometers : 0,meters:0}},watch : {kilometers:function(newValue, oldValue) {// 判断是否是当前输入框if (this.currentlyActiveField === 'kilometers') {this.kilometers = newValue;this.meters = newValue * 1000}},meters : function (newValue, oldValue) {// 判断是否是当前输入框if (this.currentlyActiveField === 'meters') {this.kilometers = newValue/ 1000;this.meters = newValue;}}}}vm = Vue.createApp(app).mount('#app')vm.$watch('kilometers', function (newValue, oldValue) {// 这个回调将在 vm.kilometers 改变后调用document.getElementById ("info").innerHTML = "修改前值为: " + oldValue + "，修改后值为: " + newValue;})
</script>
</body>
</html>

    页面效果：输入千米值或米值会自动转换，并在下面提示千米变化前和变化后的值
    在这里插入图片描述

    在这里插入图片描述

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

2.3 异步加载中使用 watch

异步数据的加载 Vue 通过 watch 选项提供了一个更通用的方法，来响应数据的变化。

以下实例我们使用 axios 库，后面会具体介绍。

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>Vue 测试实例 通过监听属性Watch 异步数据的加载Vue  </title><!-- 因为 AJAX 库和通用工具的生态已经相当丰富，Vue 核心代码没有重复 --><!-- 提供这些功能以保持精简。这也可以让你自由选择自己更熟悉的工具。 --><script src="https://cdn.staticfile.org/axios/0.27.2/axios.min.js"></script><script src="https://cdn.staticfile.org/vue/3.2.37/vue.global.min.js"></script>
</head>
<body>
<!--以上代码中我们创建了两个输入框，data 属性中， kilometers 和 meters 初始值都为 0。
watch 对象创建了 data 对象的两个监控方法： kilometers 和 meters。
当我们在输入框输入数据时，watch 会实时监听数据变化并改变自身的值。-->
<div id = "app"><p>输入一个问题，已？结尾输出答案：<input v-model="question"></p><p>{{ answer }}</p>
</div><script>const app = {data() {return {question: '',answer: '每个问题结尾需要输出?号'}},//     watch对象 创建获得答案的方法 传入的问题结尾问号兼容中英文watch : {question(newQuestion, oldQuestion){if (newQuestion.indexOf('?') > -1 || newQuestion.indexOf('？') > -1){this.getAnswer()}}},//     定义获得答案的方法methods : {getAnswer() {this.answer = '加载中...'//     异步获得axios.get('/try/ajax/json_vuetest.php').then(response => {this.answer = response.data.answer}).catch(error => {this.answer = '错误! 无法访问 API。 ' + error})}}}Vue.createApp(app).mount('#app')</script>
</body>
</html>

页面效果：
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

2.4 小计

  • @blur 是当元素失去焦点时所触发的事件

  • @focus是元素获取焦点时所触发的事件

    <template><input type="text" @blur="blurText"/>
</template>
<script>
export default {methods:{blurText(){console.log("blur事件被执行了")}}
}
</script>

相关文章：

Vue3 监听属性-watch

文章目录 Vue3 监听属性-watch1. 概念2. 实例2.1 通过使用 watch 实现计数器2.2 千米与米之间的换算2.3 异步加载中使用 watch2.4 小计 Vue3 监听属性-watch 1. 概念 Vue3 监听属性 watch&#xff0c;可以通过 watch 来响应数据的变化。 watch 的作用&#xff1a;用于监测响应…...

编程日记 2023/9/14 3:38:50

JWT安全

文章目录 理论知识cookie(放在浏览器)session(放在 服务器)tokenjwt&#xff08;json web token&#xff09;headerpayloadSignatureJWT通信流程 JWT与Token 区别相同点区别 WebGoat靶场--JWT tokens环境启动第四关第五关第七关 属于越权漏洞 理论知识 cookie(放在浏览器) ​…...

编程日记 2023/9/14 3:36:48

LabVIEW利用人工神经网络辅助进行结冰检测

LabVIEW利用人工神经网络辅助进行结冰检测 结冰对各个领域构成重大威胁&#xff0c;包括但不限于航空航天和风力涡轮机行业。在起飞过程中&#xff0c;飞机机翼上轻微积冰会导致升力降低25%。研究报告称&#xff0c;涡轮叶片上的冰堆积可在19个月的运行时间内造成29MWh的功率损…...

编程日记 2023/9/14 3:34:45

Linux安装MySQL8.0

又又又又..Linux装MySQL。 删除原有的MySQL 查看安装的mysql信息&#xff1a;rpm -qa|grep -i mysql 删除mysql相关服务&#xff1a;rpm -e --nodeps 查询mysql遗留文件和依赖信息&#xff1a;find / -name mysql 手动删除mysql配置文件&#xff1a;rm -rf /etc/my.cnf 相关…...

编程日记 2023/9/14 3:32:43

【【萌新编写RISCV之前言CPU的部分介绍.3】】

萌新编写RISCV之前言CPU的部分介绍.3 CPU的数字电路结构实际十分简单&#xff0c;最主要的模块有PC&#xff08;地址生成&#xff09;&#xff0c;ALU&#xff08;运算&#xff09;&#xff0c;Register&#xff08;寄存&#xff09;&#xff0c;Decode&#xff08;译码&#…...

编程日记 2023/9/14 3:29:37

dl_model_param

set_dl_model_param —设置深度学习模型的参数 get_dl_model_param — Return the parameters of a deep learning model 返回深度学习模型的参数 使用read_dl_model读取前一步初始化后的网络模型&#xff0c;得到模型的句柄DLModelHandle。 接着用read_dict读取预处理后的数…...

编程日记 2023/9/14 3:25:32

Android相机调用-CameraX【外接摄像头】【USB摄像头】

Android相机调用有原生的Camera和Camera2&#xff0c;我觉得调用代码都太复杂了&#xff0c;CameraX调用代码简洁很多。 说明文档&#xff1a;https://developer.android.com/jetpack/androidx/releases/camera?hlzh-cn 现有查到的调用资料都不够新&#xff0c;对于外接摄像…...

编程日记 2023/9/14 3:24:30

第一个Java程序

1. 将扩展名.text更改为.java 2.文件夹&#xff08;Hello.java&#xff09;上方输入“cmd空格回车”&#xff08;没有加号&#xff09; 3.在命令提示符内输入“javac空格文件夹名称.java回车” (javac空格Hello.java回车) 执行成功后&#xff0c;文件夹下多一个Hello.class…...

编程日记 2023/9/14 3:23:29

OpenCV之霍夫变换检测直线

霍夫变换 首先是笛卡尔坐标系到霍夫空间的转换&#xff0c;比如笛卡尔坐标系中有一条直线 yaxb。 笛卡尔坐标系中一条直线&#xff0c;对应霍夫空间的一个点。 反过来同样成立&#xff08;霍夫空间的一条直线&#xff0c;对应笛卡尔坐标系的一个点&#xff09; 原理其实很简单 …...

编程日记 2023/9/14 3:22:27

lv3 嵌入式开发-11 Linux下GDB调试工具

目录 1 GDB简介 2 GDB基本命令 3 GDB调试程序 1 GDB简介 GDB是GNU开源组织发布的一个强大的Linux下的程序调试工具。 一般来说&#xff0c;GDB主要帮助你完成下面四个方面的功能&#xff1a; 1、启动你的程序&#xff0c;可以按照你的自定义的要求随心所欲的运行程序&#…...

编程日记 2023/9/14 3:21:25

Zabbix监控平台概念

1.概念 Zabbix是一款开源的、免费的、分布式监控平台支持web管理&#xff0c;WEB界面可以方便管理员使用可以监控硬件服务器CPU温度、风扇转速、操作系统CPU、EME、DISK、I/O、流量宽带、负载、端口、进程等Zabbix是C/S架构&#xff0c;Client客户端和Server端组成 2.Zabbix可…...

编程日记 2023/9/14 3:20:23

【javaSE】 枚举与枚举的使用

文章目录 &#x1f384;枚举的背景及定义⚾枚举特性总结&#xff1a; &#x1f332;枚举的使用&#x1f6a9;switch语句&#x1f6a9;常用方法&#x1f4cc;示例一&#x1f4cc;示例二 &#x1f38d;枚举优点缺点&#x1f334;枚举和反射&#x1f6a9;枚举是否可以通过反射&…...

编程日记 2023/9/14 3:19:22

NetSuite知识会汇编-管理员篇顾问篇2023

本月初&#xff0c;开学之际&#xff0c;我们发布了《NetSuite知识会汇编-用户篇 2023》&#xff0c;这次发布《NetSuite知识会汇编-管理员篇&顾问篇2023》。本篇挑选了近两年NetSuite知识会中的一些文章&#xff0c;涉及开发、权限、系统管理等较深的内容&#xff0c;共19…...

编程日记 2023/9/14 3:18:21

根号分治与多项式的巧妙结合：GYM-104386G

使用范围&#xff1a;序列上对于每种数的计数问题 考虑对每种数的出现次数进行根号分治 如果出现次数很少&#xff0c;直接平方暴力即可 如果很大考虑任意 ( i , j ) (i,j) (i,j)&#xff0c;我们拆一下&#xff0c;再移一下&#xff0c;然后就变成了卷积形式...

编程日记 2023/9/14 3:17:20

通过FTP高速下载几百G数据

基因组下载 (FTP) 常见问题解答 基因组FTP站点有哪些亮点？下载多个基因组组装数据的最简单方法是什么？下载大型数据集的最佳协议是什么？为什么 NCBI 基因组 FTP 站点要重组？我如何及时了解 NCBI 基因组 FTP 站点的变化？...

编程日记 2023/9/14 3:16:20

cudnn-windows-x86_64-8.6.0.163_cuda11-archive 下载

网址不太好访问的话,请从下面我提供的分享下载 Download cuDNN v8.6.0 (October 3rd, 2022), for CUDA 11.x 此资源适配 cuda11.x 将bin和include文件夹里的文件&#xff0c;分别复制到C盘安装CUDA目录的对应文件夹里 安装cuda时自动设置了 CUDA_PATH_V11_8 及path C:\Progra…...

编程日记 2023/9/14 3:13:16

多线程案例(1) - 单例模式

目录 单例模式 饿汉模式 懒汉模式 前言 多线程中有许多非常经典的设计模式&#xff08;这就类似于围棋的棋谱&#xff09;&#xff0c;这是用来解决我们在开发中遇到很多 "经典场景"&#xff0c;简单来说&#xff0c;设计模式就是一份模板&#xff0c;可以套用。…...

编程日记 2023/9/14 3:09:12

Arduino驱动TCS34725传感器（颜色传感器篇）

目录 1、传感器特性 2、硬件原理图 3、控制器和传感器连线图 4、驱动程序 TCS34725是一款低成本，高性价比的RGB全彩颜色识别传感器，传感器通过光学感应来识别物体的表面颜色。...

编程日记 2023/9/14 3:06:08

知识库网站如何搭建？需要注意这五个要点！

正因为知识库提供结构化知识库来记载信息和知识&#xff0c;便于团队沉淀经验、共享资源&#xff0c;形成完整的知识体系并持续进化​&#xff0c;使得它成为当前企业发展新宠。 构建自己/团队的知识库是一个良好的习惯&#xff0c;可以提高工作和学习效率&#xff0c;以下是一…...

编程日记 2023/9/14 3:04:06

【UE虚幻引擎】UE源码版编译、Andorid配置、打包

首先是要下载源码版的UE&#xff0c;我这里下载的是5.2.1 首先要安装Git 在你准备放代码的文件夹下右键点击Git Bash Here 然后可以直接git clone https://github.com/EpicGames/UnrealEngine 不行的话可以直接去官方的Github上下载Zip压缩包后解压 运行里面的Setup.bat&a…...

编程日记 2023/9/14 3:02:04

基于算法竞赛的c++编程（28）结构体的进阶应用

结构体的嵌套与复杂数据组织 在C中&#xff0c;结构体可以嵌套使用&#xff0c;形成更复杂的数据结构。例如&#xff0c;可以通过嵌套结构体描述多层级数据关系&#xff1a; struct Address {string city;string street;int zipCode; };struct Employee {string name;int id;…...

编程新知 2025/6/17 5:30:27

微信小程序之bind和catch

这两个呢&#xff0c;都是绑定事件用的&#xff0c;具体使用有些小区别。 官方文档&#xff1a; 事件冒泡处理不同 bind&#xff1a;绑定的事件会向上冒泡&#xff0c;即触发当前组件的事件后&#xff0c;还会继续触发父组件的相同事件。例如&#xff0c;有一个子视图绑定了b…...

编程新知 2025/7/1 19:17:22

智慧工地云平台源码，基于微服务架构+Java+Spring Cloud +UniApp +MySql

智慧工地管理云平台系统&#xff0c;智慧工地全套源码&#xff0c;java版智慧工地源码&#xff0c;支持PC端、大屏端、移动端。 智慧工地聚焦建筑行业的市场需求&#xff0c;提供“平台网络终端”的整体解决方案&#xff0c;提供劳务管理、视频管理、智能监测、绿色施工、安全管…...

编程新知 2025/6/28 14:16:11

2024年赣州旅游投资集团社会招聘笔试真

2024年赣州旅游投资集团社会招聘笔试真 题 ( 满 分 1 0 0 分 时 间 1 2 0 分 钟 ) 一、单选题(每题只有一个正确答案，答错、不答或多答均不得分) 1.纪要的特点不包括()。 A.概括重点 B.指导传达 C. 客观纪实 D.有言必录 【答案】: D 2.1864年，()预言了电磁波的存在，并指出…...

编程新知 2025/6/21 10:08:07

JVM垃圾回收机制全解析

Java虚拟机&#xff08;JVM&#xff09;中的垃圾收集器&#xff08;Garbage Collector&#xff0c;简称GC&#xff09;是用于自动管理内存的机制。它负责识别和清除不再被程序使用的对象&#xff0c;从而释放内存空间&#xff0c;避免内存泄漏和内存溢出等问题。垃圾收集器在Ja…...

编程新知 2025/6/23 2:48:54

linux arm系统烧录

1、打开瑞芯微程序 2、按住linux arm 的 recover按键 插入电源 3、当瑞芯微检测到有设备 4、松开recover按键 5、选择升级固件 6、点击固件选择本地刷机的linux arm 镜像 7、点击升级 &#xff08;忘了有没有这步了 估计有&#xff09; 刷机程序 和 镜像 就不提供了。要刷的时…...

编程新知 2025/6/20 16:35:26

论文解读：交大港大上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化学习框架（一）

宇树机器人多姿态起立控制强化学习框架论文解析 论文解读&#xff1a;交大&港大&上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化学习框架&#xff08;一&#xff09; 论文解读&#xff1a;交大&港大&上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化…...

编程新知 2025/6/25 2:28:56

基于matlab策略迭代和值迭代法的动态规划

经典的基于策略迭代和值迭代法的动态规划matlab代码&#xff0c;实现机器人的最优运输 Dynamic-Programming-master/Environment.pdf , 104724 Dynamic-Programming-master/README.md , 506 Dynamic-Programming-master/generalizedPolicyIteration.m , 1970 Dynamic-Programm…...

编程新知 2025/6/27 10:32:23

LINUX 69 FTP 客服管理系统 man 5 /etc/vsftpd/vsftpd.conf

FTP 客服管理系统 实现kefu123登录&#xff0c;不允许匿名访问&#xff0c;kefu只能访问/data/kefu目录&#xff0c;不能查看其他目录 创建账号密码 useradd kefu echo 123|passwd -stdin kefu [rootcode caozx26420]# echo 123|passwd --stdin kefu 更改用户 kefu 的密码…...

编程新知 2025/6/27 23:54:47

五子棋测试用例

一.项目背景 1.1 项目简介 传统棋类文化的推广 五子棋是一种古老的棋类游戏&#xff0c;有着深厚的文化底蕴。通过将五子棋制作成网页游戏&#xff0c;可以让更多的人了解和接触到这一传统棋类文化。无论是国内还是国外的玩家&#xff0c;都可以通过网页五子棋感受到东方棋类…...

编程新知 2025/7/2 6:35:33