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

【vue】watch 侦听器

news 文章来源：https://blog.csdn.net/m0_63070489/article/details/137693098 2024/11/6 11:44:18

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

相关文章：

【vue】watch 侦听器

watch&#xff1a;可监听值的变化&#xff0c;旧值和新值 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><titl…...

编程日记 2024/4/13 16:18:47

校招生如何准备软件测试、测试开发岗位的面试？

校招生如何准备软件测试、测试开发岗位的面试&#xff1f; 求职建议 大家都很困惑如何学习测试&#xff1f;如何准备测试方面的面试&#xff1f; 我有朋友是做研发的&#xff0c;他认为测试不用准备&#xff0c;直接用开发的简历就行。也有人认为要学习一些测试理论&#xf…...

编程日记 2024/4/13 16:17:45

蓝桥杯抱佛脚篇~

文章目录 基础语法输入输出集合(set&#xff09;排序 基础语法 输入输出 # 输入一个数 nint(input())# 输入两、三个数&#xff0c;例如&#xff1a;1 2 或者 1 2 3 x,y map(int,input().split())# 输入数组 # ——— 1 —— nums[int(i) for i in input().split()] print(n…...

编程日记 2024/4/13 16:16:43

基于springboot的大学城水电管理系统源码数据库

基于springboot的大学城水电管理系统源码数据库 随着信息技术在管理上越来越深入而广泛的应用&#xff0c;管理信息系统的实施在技术上已逐步成熟。本文介绍了大学城水电管理系统的开发全过程。通过分析大学城水电管理系统管理的不足&#xff0c;创建了一个计算机管理大学城水…...

编程日记 2024/4/13 16:15:42

AI大模型探索之路-应用篇2：Langchain框架ModelIO模块—数据交互的秘密武器

目录 前言 一、概述 二、Model 三、Prompt 五、Output Parsers 总结 前言 随着人工智能技术的不断进步&#xff0c;大模型的应用场景越来越广泛。LangChain框架作为一个创新的解决方案&#xff0c;专为处理大型语言模型的输入输出而设计。其中&#xff0c;Model IO&#…...

编程日记 2024/4/13 16:14:41

【SSH】群晖开启ssh访问

群晖开启ssh访问 假设 你需要设置群晖 账号 test-user 开启ssh访问 设置 你的 test-user 为管理员权限 否则你无法通过cmd 面板 连接访问 群晖你需要哪个账号 就使用哪个账号终端 cmd连接 否则需要考虑后续创建 rsa 公密钥文件的 所属权 问题账号密码连接登录终端 ssh -p 端…...

编程日记 2024/4/13 16:13:39

Vue 移动端（H5）项目怎么实现页面缓存（即列表页面进入详情返回后列表页面缓存且还原页面滚动条位置）keep-alive缓存及清除keep-alive缓存

一、需求 产品要求&#xff1a;Vue移动端项目进入列表页&#xff0c;列表页需要刷新&#xff0c;而从详情页返回列表页&#xff0c;列表页则需要缓存并且还原页面滚动条位置 二、实现思路 1、使用Vue中的keep-alive组件&#xff0c;keep-alive提供了路由缓存功能 2、因为我项…...

编程日记 2024/4/13 16:12:38

【MVCC】深入浅出彻底理解MVCC

MVCC概述 MVCC&#xff08;Multi-Version Concurrency Control&#xff09;即多版本并发控制。主要是为了提高数据库的并发性能而提供的&#xff0c;采用了不加锁的方式处理读-写并发冲突&#xff0c;确保了任何时刻的读操作都是非阻塞的。只需要很小的开销&#xff0c;就可以…...

编程日记 2024/4/13 16:11:37

【问题解决】ubuntu安装新版vscode报code-insiders相关错误

问题 目前 vscode官网 最新的包为 insiders_1.89.0-1712297812_amd64.deb &#xff0c;双击或者使用sudo dpkg -i code-insiders_1.89.0-1712297812_amd64.deb安装后报错&#xff0c;执行其他命令也报错。 安装环境&#xff1a;ubuntu18.04 dpkg: 处理软件包 code-insiders (…...

编程日记 2024/4/13 16:08:33

【Python】面向对象（专版提升2）

面向对象 1. 概述1.1面向过程1.2 面向对象 2. 类和对象2.1 语法2.1.1 定义类2.1.2 实例化对象 2.2 实例成员2.2.1 实例变量2.2.2 实例方法2.2.3 跨类调用 3. 三大特征3.1 封装3.1.1 数据角度3.1.2 行为角度3.1.3 案例:信息管理系统3.1.3.1 需求3.1.3.2 分析3.1.3.3 设计 3.2 继…...

编程日记 2024/4/13 16:07:32

Vscode设置滚轮进行字体大小的调节

Vscode设置滚轮进行字体大小的调节 正常的话按 ctrl 或者 ctrl - 进行字体的大小调节 1.打开Vscode&#xff0c;找打设置的图标&#xff0c;在点击设置&#xff0c;或者直接使用快捷键&#xff0c;【ctrl ,】 2. 在搜索框搜索Font Ligatures 3.双击进入settings.json ,找到如…...

编程日记 2024/4/13 15:59:22

【QT入门】Qt自定义控件与样式设计之控件提升与自定义控件

【QT入门】Qt自定义控件与样式设计之控件提升与自定义控件 往期回顾 【QT入门】Qt自定义控件与样式设计之QProgressBar用法及qss-CSDN博客 【QT入门】 Qt自定义控件与样式设计之QSlider用法及qss-CSDN博客 【QT入门】Qt自定义控件与样式设计之qss的加载方式-CSDN博客 一、最终…...

编程日记 2024/4/13 15:58:21

Spring Validation解决后端表单校验

NotNull&#xff1a;从前台传递过来的参数不能为null,如果为空&#xff0c;会在控制台日志中把message打印出来 Range&#xff1a;范围&#xff0c;最大多少&#xff0c;最小多少 Patten&#xff0c;标注的字段值必须符合定义的正则表达式&#xff08;按照业务规则&#xff0…...

编程日记 2024/4/13 15:56:19

Harmony鸿蒙南向驱动开发-UART接口使用

功能简介 UART指异步收发传输器&#xff08;Universal Asynchronous Receiver/Transmitter&#xff09;&#xff0c;是通用串行数据总线&#xff0c;用于异步通信。该总线双向通信&#xff0c;可以实现全双工传输。 两个UART设备的连接示意图如下&#xff0c;UART与其他模块一…...

编程日记 2024/4/13 15:54:17

【示例】MySQL-事务控制示例：账户转账-savepoint关键字

前言 本文讲述MySQL中的事务&#xff0c;以账户转账为例&#xff0c;体会事务的概念&#xff0c;并讲解事务相关的一个关键字用法&#xff1a;savepoint 示例 数据准备 drop table if exists account;create table account(id int primary key AUTO_INCREMENT comment ID,n…...

编程日记 2024/4/13 15:52:15

STM32使用标准版RT-Thread,移植bsp中的板文件后，想使用I/O设备模型，使用串口3或者串口4收发时，发现串口3或者串口4没反应

STM32移植RT-Thread出现的问题及解决办法 问题原因解决方法 问题 使用标准版RT-Thread,移植bsp中的板文件后&#xff0c;想使用I/O设备模型&#xff0c;使用串口3或者串口4收发时&#xff0c;发现串口3或者串口4没反应。出现问题&#xff1a;程序一直跑在 while (__HAL_UART_…...

编程日记 2024/4/13 15:51:13

MVCC（解决MySql中的并发事务的隔离性）

MVCC 如何保证事务的隔离性&#xff1f; 1.排他锁&#xff1a;如一个事务获取了一个数据行的排他锁&#xff0c;其他事务就不能再获取改行的其他锁。 2.MVCC&#xff1a;多版本并发控制。 MVCC&#xff1a; 1.隐藏字段 1.DB_TRX_ID&#xff1a;最近修改事务的id。默认值从0开…...

编程日记 2024/4/13 15:48:06

第四十八章 为 Web 应用程序实现 HTTP 身份验证 - 在处理请求之前在 CSP 中进行身份验证

文章目录 第四十八章 为 Web 应用程序实现 HTTP 身份验证 - 在处理请求之前在 CSP 中进行身份验证在处理请求之前在 CSP 中进行身份验证。 第四十八章 为 Web 应用程序实现 HTTP 身份验证 - 在处理请求之前在 CSP 中进行身份验证 在处理请求之前在 CSP 中进行身份验证。 这是…...

编程日记 2024/4/13 15:45:03

家庭网络防御系统搭建-siem之security onion 安装配置过程详解

本文介绍一下security onion的安装流程&#xff0c;将使用该工具集中管理终端EDR和网络NDR sensor产生的日志。 充当SIEM的平台有很多&#xff0c;比如可以直接使用原生的elastic以及splunk等&#xff0c;security onion的优势在于该平台能够方便的集成网络侧&#xff08;比如…...

编程日记 2024/4/13 15:44:02

【MATLAB源码-第23期】基于matlab的短时傅里叶STFT信号变换仿真，得到信号的时频曲线图。

1、算法描述 短时傅里叶变换&#xff08;Short-Time Fourier Transform&#xff0c;STFT&#xff09;是傅里叶变换的一种扩展&#xff0c;用于分析信号在时域和频域上的变化。描述如下&#xff1a; 1. **时域与频域分析**&#xff1a; - 信号通常以时域的形式表示&#xf…...

编程日记 2024/4/13 15:43:01

链表中倒数最后k个结点【c语言】

#include <stdio.h> #include <stdlib.h>typedef struct Node {int data;struct Node* next; } Node, *LinkedList;// 创建一个新节点 Node* createNode(int data) {Node* newNode (Node*)malloc(sizeof(Node));if (newNode NULL) {printf("Error! Unable t…...

编程日记 2024/4/13 15:41:00

在一台恢复测试机器上验证oracle备份有效性

一 目的 定期将生产环境oracle数据库恢复到一台测试环境数据库服务器上&#xff0c;以验证备份是否有效&#xff0c;是否能正常恢复。 二 环境 这里以恢复orcl1库为例&#xff0c;计划在orcl这个实例上进行恢复测试。 三 实验步骤 3.1 在目标端创建和源端一样的备份目录 ①…...

编程日记 2024/4/13 15:39:59

Harmony鸿蒙南向驱动开发-MIPI CSI

CSI&#xff08;Camera Serial Interface&#xff09;是由MIPI联盟下Camera工作组指定的接口标准。CSI-2是MIPI CSI第二版&#xff0c;主要由应用层、协议层、物理层组成&#xff0c;最大支持4通道数据传输、单线传输速度高达1Gb/s。 物理层支持HS&#xff08;High Speed&…...

编程日记 2024/4/13 15:37:56

最优算法100例之43-包含min函数的栈

专栏主页：计算机专业基础知识总结（适用于期末复习考研刷题求职面试）系列文章https://blog.csdn.net/seeker1994/category_12585732.html 题目描述 题目描述： 定义栈的数据结构，请在该类型中实现一个能够得到栈的最小元素的min函数，在该栈中，调用min,push及pop的时间复杂…...

编程日记 2024/4/13 15:36:55

什么是One-Class SVM

1. 简介 单类支持向量机&#xff0c;简称One-Class SVM(One-Class Support Vector Machine)&#xff0c;是一种用于异常检测的监督学习算法。其主要目标是找出数据集中的异常或罕见样本&#xff0c;而不需要大量的正常样本用于训练。这使其在处理高维数据和非常稀疏的异常检测问…...

编程日记 2024/4/13 15:35:54

【Ubuntu】远程连接乌班图的方式-命令行界面、图形界面

​​​​​​系统环境&#xff1a;ubuntu-22.04.2-amd64.iso 连接工具&#xff1a;MobaXterm、windows自带远程桌面mstsc.exe 重置root密码&#xff1a;Ubuntu默认root密码是随机的&#xff0c;需要使用命令sudo passwd 进行重置。 一、命令行界面-SSH连接 1.1 SSH服务安装 …...

编程日记 2024/4/13 15:34:52

Ubuntu无网络标识的解决方法

1.出现的情况的特点 2.解决办法 2.1 进入root并输入密码 sudo su 2.2 更新NetworkManager的配置 得先有gedit或者vim&#xff0c;两个随意一个&#xff0c;这里用的gedit&#xff0c;没有就先弄gedit&#xff0c;有的话直接下一步 apt-get install gedit 或者vim apt-get ins…...

编程日记 2024/4/13 15:33:51

基于springboot实现课程答疑管理系统项目【项目源码+论文说明】

基于springboot实现课程答疑管理系统演示 摘要 随着信息互联网信息的飞速发展&#xff0c;无纸化作业变成了一种趋势&#xff0c;针对这个问题开发一个专门适应师生交流形式的网站。本文介绍了课程答疑系统的开发全过程。通过分析企业对于课程答疑系统的需求&#xff0c;创建了…...

编程日记 2024/4/13 15:31:48

【JVM】面试题汇总

JVM1. 什么是JVM&#xff1f;2. 了解过字节码文件的组成吗&#xff1f;3. 什么是运行时数据区4. 哪些区域会出现内存溢出5. JVM在JDK6-8之间在内存区域上有什么不同 6. 类的生命周期 7. 什么是类加载器&#xff1f;类加载器有哪几种 8. 什么是双亲委派机制&#xff1f;有什么好…...

编程日记 2024/4/13 15:30:47

趣谈 Rust 的 Copy trait 和 Clone trait

一、Copy trait 的关键作用 Rust 程序中的变量可以分成两类&#xff1a;实现 Copy trait 的和没实现 Copy trait 的。这有啥区别&#xff1f;当然很重要! 实现 Copy trait 的变量&#xff1a; 不存在所有权问题&#xff0c;可以随意赋值给其他变量&#xff0c;可以随意当参数…...

编程日记 2024/4/13 15:27:39

电子商务网站建设与管理考试/关键词挖掘工具

九、map 9.1 map概述 map是key-value数据结构&#xff0c;又称为字段或者关联数组。类似其它编程语言的集合&#xff0c;在编程中是经常使用到 基本语法 var map 变量名 map[keytype]valuetypekey可以是什么类型 golang中的map&#xff0c;的 key 可以是很多种类型&#xf…...

编程日记 2024/11/6 11:32:58

企业网站建设 广州/百分百营销软件

Hystrix的异常处理1.服务降级1.1Throwable 捕获异常信息1.2模拟一个异常1.3测试结果 捕获异常1.3.1 本地异常捕获1.3.2远程服务异常 &#xff08;第二个服务提供者中&#xff09;2.把异常抛给用户&#xff08;服务不降级&#xff09;2.1错误信息 返回给用户3.自定义Hystrix 请求…...

编程日记 2024/11/6 10:37:15

做网站论坛 前置许可/长沙疫情最新数据消息

场景一&#xff1a;类似于微博&#xff0c;实现关注和被关注功能。 思路&#xff1a; 对每个用户使用两个集合类型键&#xff0c;用来存储关注别人的用户和被该用户关注的用户。当用户A关注用户B的时候&#xff0c;执行两步操作&#xff1a; sadd user:A B sadd user:B A 问题1…...

编程日记 2024/11/6 3:15:25

毕节网站怎么做seo/seo优化运营

JSVC是apache出的所谓common daemon的一个工具套件&#xff0c;他利用一个daemon程序&#xff0c;从而使tomcat这样的程序能在开机的时候自动启动&#xff0c;而且能使tomcat被 chkconfig这样的工具所管理。在之前的一篇文章中对jsvc有详细的说明和介绍&#xff0c;这里不再赘述…...

编程日记 2024/11/5 22:10:05

企业网站首页设计评价/开封网站推广

神经网络实践心得1.关于神经网络层数2.关于隐藏层神经元个数3.关于优化器optimizer4.关于Mini-batch SGD5.关于hard-mining6.关于loss函数7.数据归一化与BN参考文献实践过程主要参考了此篇博客&#xff1a;The Number of Hidden Layersl。 1.关于神经网络层数 隐藏层先选择1层…...

编程日记 2024/11/5 18:38:36

网络管理系统的基本组件包括哪些?/佛山seo联系方式

主要内容&#xff1a; 信号的稀疏表示模型压缩测量RIP性质 恢复重建一、信号的稀疏表示模型 信号在某个空间是非稀疏的&#xff0c;如果变换到某个空间&#xff0c;即可变成稀疏的。 稀疏信号表示有极少的非零系数。 如下图&#xff0c;左边表示X信号在R3空间中只有一个非0系数…...

编程日记 2024/11/5 12:34:07