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

Vue3 监听属性-watch

news 文章来源：https://blog.csdn.net/weixin_46592197/article/details/132730986 2025/1/11 0:06:22

文章目录

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，可以通过 watch 来响应数据的变化。 watch 的作用：用于监测响应…...

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

JWT安全

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

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

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

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

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

Linux安装MySQL8.0

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

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

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

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

编程日记 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读取前一步初始化后的网络模型，得到模型的句柄DLModelHandle。接着用read_dict读取预处理后的数…...

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

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

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

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

第一个Java程序

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

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

OpenCV之霍夫变换检测直线

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

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

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

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

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

Zabbix监控平台概念

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

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

【javaSE】枚举与枚举的使用

文章目录 🎄枚举的背景及定义⚾枚举特性总结： 🌲枚举的使用🚩switch语句🚩常用方法📌示例一📌示例二 🎍枚举优点缺点🌴枚举和反射🚩枚举是否可以通过反射&…...

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

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

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

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

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

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

编程日记 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文件夹里的文件，分别复制到C盘安装CUDA目录的对应文件夹里安装cuda时自动设置了 CUDA_PATH_V11_8 及path C:\Progra…...

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

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

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

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

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

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

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

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

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

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

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

首先是要下载源码版的UE，我这里下载的是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

树和二叉树的相关概念及结构

目录 1.树的概念及结构 1.1 树的概念 1.2 树的相关概念 1.3 树的表示 1.3.1 孩子兄弟表示法 1.3.2 双亲表示法 1.4 树的实际应用 2.二叉树的概念及结构 2.1 二叉树的概念 2.2 特殊的二叉树 2.3 二叉树的性质 2.4 二叉树的存储 2.4.1 顺序存储 2.4.2 链式存储 1.树…...

编程日记 2023/9/14 3:01:03

MySQL安装validate_password_policy插件

功能介绍 validate_password_policy 是插件用于验证密码强度的策略。该参数可以设定三种级别：0代表低，1代表中，2代表高。 validate_password_policy 主要影响密码的强度检查级别： 0/LOW：只检查密码长度。 1/MEDIUM&am…...

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

数据在内存中的存储——练习3

题目： 3.1 #include <stdio.h> int main() {char a -128;printf("%u\n",a);return 0; }3.2 #include <stdio.h> int main() {char a 128;printf("%u\n",a);return 0; }思路分析： 首先二者极其相似%u是无符号格式进行…...

编程日记 2023/9/14 2:58:00

第一章 JAVA入门

文章目录 1.2 Java 的特点1.2.1 简单1.2.2 面向对象1.2.3 与平台无关① 平台与机器指令② C/C程序依赖平台③ Java 虚拟机与字节码1.2.4 多线程1.2.5 动态1.30安装 JDK1.3.1 平台简介0 Java SE②Java EE1.4 Java 程序的开发步骤②保存源文件1.5.2 编译1.8 Java之父-James Gosli…...

编程日记 2023/9/14 2:52:55

二叉树详解(求二叉树的结点个数、深度、第k层的个数、遍历等)

二叉树，是一种特殊的树，特点是树的度小于等于2（树的度是整个树的结点的度的最大值），由于该特性，构建二叉树的结点只有三个成员，结点的值和指向结点左、右子树的指针。 typedef int DateType; t…...

编程日记 2023/9/14 2:51:54

Apollo配置中心及Python连接

本文将会介绍如何启动Apollo，在Apollo中配置参数，以及如何使用Python连接Apollo. Apollo介绍在文章Python之读取配置文件和文章Python之配置文件处理中，笔者分别介绍了如何使用Python来处理ini, yaml, conf等配置文件。这种配置方式比较方便…...

编程日记 2023/9/14 2:50:52

LuatOS-SOC接口文档(air780E)--audio - 多媒体音频

常量常量类型解释 audio.PCM number PCM格式，即原始ADC数据 audio.MORE_DATA number audio.on回调函数传入参数的值，表示底层播放完一段数据，可以传入更多数据 audio.DONE number audio.on回调函数传入参数的值，表示…...

编程日记 2023/9/14 2:48:50

Golang gorm manytomany 多对多更新、删除、替换

Delete 移除只删除中间表的数据删除原有的 var a Article1db.Preload("Tag1s").Take(&a, 1)fmt.Printf("%v", a) {1 k8s [{1 cloud []} {2 linux []}]}mysql> select * from article1; ------------ | id | title | ------------ | 1 | k8s …...

编程日记 2023/9/14 2:45:46

FPGA-结合协议时序实现UART收发器（四）：串口驱动模块uart_drive、例化uart_rx、uart_tx

FPGA-结合协议时序实现UART收发器（四）：串口驱动模块uart_drive、例化uart_rx、uart_tx 串口驱动模块uart_drive、例化uart_rx、uart_tx，功能实现文章目录 FPGA-结合协议时序实现UART收发器（四）&#xff1…...

编程日记 2023/9/14 2:44:45

盐城网站建设设计/百度推广开户怎么开

一．简单介绍 Maven主要是用来管理项目，主要是对java项目的管理。对java项目进行构建，节省时间，没必要把太多的时间花在项目的构建上项目的构建过程： Clean(清除) 、compile(编译)、test(test)、package(打包) 、inst…...

编程日记 2025/1/10 22:44:54

html5做手机网站/有了域名如何建立网站

给你两个二进制字符串，返回它们的和（用二进制表示）。输入为非空字符串且只包含数字 1 和 0。示例 1: 输入: a "11", b "1" 输出: "100"示例 2: 输入: a "1010", b "1011" 输出…...

编程日记 2025/1/10 21:24:05

网址大全12345/seo优化行业

mysql调优实战如何优化查询效率优化查询效率的方式----建立索引索引的优缺点索引的分类---1,普通索引2,唯一索引3,单列索引4,组合索引5,全文索引6,空间索引索引的选择---创建索引的方式----普通索引与唯一索引之间的区别---多列索引---组合索引---全文索引----空间索引---查看表…...

编程日记 2025/1/10 21:08:56