【vue】watch 侦听器

watch:可监听值的变化,旧值和新值

在这里插入图片描述

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><div id="app">爱好<select v-model="hobby"><option value="">请选择</option><option value="reading">阅读</option><option value="swimming">游泳</option><option value="running">跑步</option></select><hr><select v-model="date.year"><option value="">请选择</option><option value="2021">2021</option><option value="2022">2022</option><option value="2023">2023</option><option value="2024">2024</option></select><select v-model="date.month"><option value="">请选择</option><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option><option value="6">6</option><option value="7">7</option><option value="8">8</option><option value="9">9</option><option value="10">10</option><option value="11">11</option><option value="12">12</option></select></div><script type="module">import { createApp, reactive, ref, watch } from './vue.esm-browser.js'createApp({setup() {const hobby = ref("")const date = reactive({year: "",month: ""})//监听hobby变化watch(hobby, (newVal, oldVal) => {console.log("oldVal :", oldVal, "newVal :", newVal)})//监听某个值,如date.yearwatch(() => date.year, (newVal, oldVal) => {console.log("oldVal :", oldVal, "newVal :", newVal)})//监听date变化//发现date变化时,新旧值一样//因为数组和对象通过引用传递,而不是创建一个新的对象或数组//newVal, oldVal是指向同一个对象,所以变化时,oldVal, newVal是一样的watch(date, (newVal, oldVal) => {console.log("oldVal :", oldVal, "newVal :", newVal)})return {date,hobby}}}).mount("#app")</script>
</body></html>

参考

https://www.bilibili.com/video/BV1nV411Q7RX

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/306774.html

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

相关文章

【opencv】示例-imgcodecs_jpeg.cpp使用OpenCV库来创建和处理图像,并保存为不同JPEG采样因子的版本...

上层-原始图像 下层&#xff1a;编码解码后的lossy_img #include <opencv2/core.hpp> // 包含OpenCV核心功能的头文件 #include <opencv2/imgproc.hpp> // 包含OpenCV图像处理功能的头文件 #include <opencv2/imgcodecs.hpp> // 包含OpenCV图像编码解码功能…

平板设备IP地址设置指南

在数字化时代&#xff0c;平板电脑作为便携且功能强大的设备&#xff0c;广泛应用于日常生活和工作中。为了确保平板能够正常接入网络并与其他设备进行通信&#xff0c;正确设置IP地址是至关重要的。虎观小二将为您介绍如何设置平板的IP地址&#xff0c;帮助您轻松完成网络配置…

大创项目推荐 深度学习+opencv+python实现车道线检测 - 自动驾驶

文章目录 0 前言1 课题背景2 实现效果3 卷积神经网络3.1卷积层3.2 池化层3.3 激活函数&#xff1a;3.4 全连接层3.5 使用tensorflow中keras模块实现卷积神经网络 4 YOLOV56 数据集处理7 模型训练8 最后 0 前言 &#x1f525; 优质竞赛项目系列&#xff0c;今天要分享的是 &am…

数字IC/FPGA——锁存器/触发器/寄存器

本文主要介绍以下几点&#xff1a; 什么是触发器和锁存器门电路和触发器的区别什么是电平钟控触发器电平钟控触发器触发器和锁存器的区别触发器的分类方式&#xff1a;逻辑功能、触发方式、电路结构、存储数据原理、构成触发器的基本器件寄存器利用移位寄存器实现串并转换或并…

WordPress LayerSlider插件SQL注入漏洞复现(CVE-2024-2879)

0x01 免责声明 请勿利用文章内的相关技术从事非法测试&#xff0c;由于传播、利用此文所提供的信息而造成的任何直接或者间接的后果及损失&#xff0c;均由使用者本人负责&#xff0c;作者不为此承担任何责任。工具来自网络&#xff0c;安全性自测&#xff0c;如有侵权请联系删…

LiveNVR监控流媒体Onvif/RTSP功能-概览负载统计展示取流中、播放中、录像中点击柱状图快速定位相关会话

LiveNVR概览负载统计展示取流中、播放中、录像中点击柱状图快速定位相关会话 1、负载信息说明2、快速定位会话3、RTSP/HLS/FLV/RTMP拉流Onvif流媒体服务 1、负载信息说明 实时展示取流中、播放中、录像中等使用数目 取流中&#xff1a;当前拉流到平台的实时通道数目播放中&am…

基于单片机的智能锁芯报警系统设计

摘 要:在传统的智能锁芯报警系统中,存在响应时间较长的问题,为此,提出一种基于单片机的智能锁芯报警系统。通过控制模块、智能锁芯设置模块、报警模块、中断模块、液晶模块等,建立系统总体框架,根据系统总体框架,通过单片机、电源适配器、智能锁芯、报警器、LED灯等…

浏览器工作原理与实践--HTTP/2:如何提升网络速度

上一篇文章我们聊了HTTP/1.1的发展史&#xff0c;虽然HTTP/1.1已经做了大量的优化&#xff0c;但是依然存在很多性能瓶颈&#xff0c;依然不能满足我们日益变化的新需求&#xff0c;所以就有了我们今天要聊的HTTP/2。 本文我们依然从需求的层面来谈&#xff0c;先分析HTTP/1.1存…

CMake构建OpenCv并导入QT项目过程中出现的问题汇总

前言 再此之前请确保你的环境变量是否配置&#xff0c;这是总共需要配置的环境变量 E:\cmake\bin E:\OpenCv\opencv\build\x64\vc15\bin F:\Qt\Tools\mingw730_64\bin F:\Qt\5.12.4\mingw73_64\bin 问题一&#xff1a; CMake Error: CMake was unable to find a build program…

Java 中文官方教程 2022 版(四十五)

原文&#xff1a;docs.oracle.com/javase/tutorial/reallybigindex.html 教程&#xff1a;自定义网络 原文&#xff1a;docs.oracle.com/javase/tutorial/networking/index.html Java 平台备受推崇&#xff0c;部分原因是其适用于编写使用和与互联网资源以及万维网进行交互的程…

Git Clone succeeded, but checkout failed

Clone succeeded, but checkout failed&#xff1a; Filename too long 原因&#xff1a; 由于系统限制&#xff0c;路径太长&#xff0c;无法检出 解决方案&#xff1a; # git允许长路径&#xff0c;在已clone的仓库执行 git config core.longpaths true # 再次检出 git ch…

云原生数据库海山(He3DB)PostgreSQL版核心设计理念

本期深入解析云原生数据库海山PostgreSQL版&#xff08;以下简称“He3DB”&#xff09;的设计理念&#xff0c;探讨在设计云原生数据库过程中遇到的工程挑战&#xff0c;并展示He3DB如何有效地解决这些问题。 He3DB是移动云受到 Amazon Aurora 论文启发而独立自主设计的云原生数…

SpringBoot3 + Vue3 + Uniapp + uView + Elenment 实现动态二级分类以及二级分类的管理

SpringBoot3 Vue3 Uniapp uView Elenment 实现动态二级分类以及二级分类的管理 1. 效果展示1.1 前端显示效果1.2 后台管理一级分类1.3 后台管理二级分类 2. 后端代码2.1 GoodsCategoryController.java2.2.1 GoodsCategoryMapper.java2.2.2 GoodsCategorySonMapper.java2.3.…

性能升级,INDEMIND机器人AI Kit助力产业再蜕变

随着机器人进入到越来越多的生产生活场景中&#xff0c;作业任务和环境变得更加复杂&#xff0c;机器人需要更精准、更稳定、更智能、更灵敏的自主导航能力。 自主导航技术作为机器人技术的核心&#xff0c;虽然经过了多年发展&#xff0c;取得了长足进步&#xff0c;但在实践…

QA测试开发工程师面试题满分问答11: web前端页面视频组件无法播放如何定位bug

当 web 前端页面的视频组件无法播放时&#xff0c;可以从以下维度进行分析和定位可能的 bug&#xff0c;分析维度包括但不限于&#xff1a;前端功能点、缓存、异常、后端功能点、资源占用、并发、网络等&#xff1a; 前端功能点&#xff1a; HTML5 视频支持&#xff1a;检查视频…

FPGA基于VCU的H265视频解压缩,解码后HDMI2.0输出,支持4K60帧,提供工程源码+开发板+技术支持

目录 1、前言免责声明 2、相关方案推荐我这里已有的视频图像编解码方案4K60帧HDMI2.0输入&#xff0c;H265视频压缩方案 3、详细设计方案设计框图FPGA开发板解压视频源Zynq UltraScale VCUVideo Frame Buffer ReadVideo MixerHDMI 1.4/2.0 Transmitter SubsystemVideo PHY Cont…

基于springboot+vue实现的计算机等级考试报名系统

作者主页&#xff1a;Java码库 主营内容&#xff1a;SpringBoot、Vue、SSM、HLMT、Jsp、PHP、Nodejs、Python、爬虫、数据可视化、小程序、安卓app等设计与开发。 收藏点赞不迷路 关注作者有好处 文末获取源码 技术选型 【后端】&#xff1a;Java 【框架】&#xff1a;spring…

淘宝Api接口开发系列,商品详情数据,搜索商品列表数据,无货源采集上货模式,数据分析

淘宝API接口开发涉及多个方面&#xff0c;包括获取商品详情数据、搜索商品列表数据、无货源采集上货模式以及数据分析等。今天给大家介绍下通过封装商品ID获取淘宝商品详情数据接口方法&#xff0c;支持高并发请求。下面我将分别对这些方面进行简要介绍。 1. 商品详情数据接口…

低频电磁仿真 | 新能源汽车性能提升的利器

永磁同步电机 新能源汽车的心脏 近年来&#xff0c;全球变暖的趋势日益加剧&#xff0c;极端天气事件层出不穷&#xff0c;这些现象都反映出当前气候形势的严峻性。为了应对这一全球性挑战&#xff0c;各国纷纷采取行动&#xff0c;制定了一系列降碳、减碳的措施。中国在2020年…

第十二届蓝桥杯大赛软件赛省赛Java 大学 B 组题解

1、ASC public class Main {public static void main(String[] args) {System.out.println(