【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.mzph.cn/news/811150.shtml

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

相关文章

HarmonyOS开发实例:【自定义Emitter】

介绍 本示例使用[Emitter]实现事件的订阅和发布&#xff0c;使用[自定义弹窗]设置广告信息。 效果预览 使用说明 进入首页后弹出广告弹窗&#xff0c;点击即可关闭。点击商品列表中的一个商品可以跳转到商品详情页。在商品详情页点击首页可以返回到商品列表页&#xff0c;点…

结构型模式--2.桥接模式【大海贼时代】

1. 组建海贼团 哥尔D罗杰是罗杰海贼团船长。他最终征服了伟大航路&#xff0c;完成了伟大航路的航行&#xff0c;被人们成为海贼王。后来得了绝症&#xff0c;得知自己命不久矣&#xff0c;主动自首并在东海罗格镇被处刑。临死前罗杰的一句话“想要我的宝藏吗&#xff1f;想要…

电商新宠:淘宝拍立淘API接口助力精准搜索商品信息

淘宝拍立淘API接口&#xff0c;作为电商领域的新宠&#xff0c;正以其独特的图像识别技术为精准搜索商品信息提供强大的助力。这项基于深度学习和计算机视觉技术的先进服务&#xff0c;使得用户能够通过上传图片来快速搜索淘宝平台上的相关商品&#xff0c;极大地提升了购物体验…

弹性云服务器性能对比(内附测试数据),快快网络服务器崭露头角

随着计算技术的不断革新&#xff0c;云服务器已成为企业和个人部署应用与服务的首选。尤其线上业务日益盛行的今天&#xff0c;云服务商的实力更是备受瞩目。对于企业而言&#xff0c;高稳定&#xff0c;存储速度都是不可或缺的基本要求&#xff0c;这些都对公有云的云端编解码…

【Linux系统】进程状态

1.直接谈论Linux的进程状态 Linux进程状态本质上是task_struct这个结构体内的一个变量用来存储进程状态。 task_struct { //内部的一个属性 int status; } R运行状态&#xff08;running&#xff09;: 并不意味着进程一定在运行中&#xff0c;它表明进程要么是在运行中要么在运…

【深度学习】深度学习md笔记总结第4篇:TensorFlow介绍,学习目标【附代码文档】

深度学习笔记完整教程&#xff08;附代码资料&#xff09;主要内容讲述&#xff1a;深度学习课程&#xff0c;深度学习介绍要求,目标,学习目标,1.1.1 区别,学习目标,学习目标。TensorFlow介绍&#xff0c;2.4 张量学习目标,2.4.1 张量(Tensor),2.4.2 创建张量的指令,2.4.3 张量…

hbase基础shell用法

HBase中用create命令创建表&#xff0c;具体如下&#xff1a; create student,Sname,Ssex,Sage,Sdept,course 此时&#xff0c;即创建了一个“student”表&#xff0c;属性有&#xff1a;Sname,Ssex,Sage,Sdept,course。因为HBase的表中会有一个系统默认的属性作为行键&#x…

李彦宏放话:百度AI大模型绝不抢开发者饭碗

关注卢松松&#xff0c;会经常给你分享一些我的经验和观点。 昨晚&#xff0c;李彦宏内部讲话称&#xff1a;AI大模型开源意义不大&#xff0c;百度绝不抢开发者饭碗。 但你一定要说话算话哦&#xff0c;可千万别说&#xff1a;“我永远不做手机&#xff0c;谁再敢提做手机就给…

科技云报道:从“奇点”到“大爆炸”,生成式AI开启“十年周期”

科技云报道原创。 世界是复杂的&#xff0c;没有人知道未来会怎样&#xff0c;但如果单纯从技术的角度&#xff0c;我们总是能够沿着技术发展的路径&#xff0c;找到一些主导未来趋势的脉络。 从Sora到Suno&#xff0c;从OpenAI到Copilot、Blackwell&#xff0c;这些热词在大…

[温故] 红黑树算法

前言 最近在突然想起一些基础的东西, 向着温故知新, 有了些新的感悟和大家分享一下. 排序算法是数据结构的一个重要组成部分, 当时学习的时候没有少折腾, 这里来看看大佬们怎么运用这些数据结构来构建庞大的计算机体系的. 二叉树是排序算法的一个衍生, 基于二叉树的构建不同…

C语言--2048小游戏

需要用到EasyX图形库 #include <stdio.h> #include <stdlib.h> #include <time.h> #include<assert.h> #include <conio.h> #include <windows.h> #include<graphics.h> #include<string.h> #define ROW 4 /* 行数 */ #defin…

Rust面试宝典第2题:逆序输出整数

题目 写一个方法&#xff0c;将一个整数逆序打印输出到控制台。注意&#xff1a;当输入的数字含有结尾的0时&#xff0c;输出不应带有前导的0。比如&#xff1a;123的逆序输出为321&#xff0c;8600的逆序输出为68&#xff0c;-609的逆序输出为-906。 解析 这道题本身并没有什么…

PostgreSQL入门到实战-第二十一弹

PostgreSQL入门到实战 PostgreSQL中表连接操作(五)官网地址PostgreSQL概述PostgreSQL中RIGHT JOIN命令理论PostgreSQL中RIGHT JOIN命令实战更新计划 PostgreSQL中表连接操作(五) 使用PostgreSQL RIGHT JOIN连接两个表&#xff0c;并从右表返回行 官网地址 声明: 由于操作系统…

打印机共享设置助手

工作中经常设置共享打印机&#xff0c;为简化操作编写了此打印机设置助手运行环境&#xff1a; 支持Windows 7以上系统直接运行Windows 7 使用PrinterTool_NET20版本Windows 10以上 使用PrinterTool_NET452版本 软件功能&#xff1a; 设置默认打印机设置共享打印机快捷连接共…

微软Office吊打WPS ?不一定,WPS未来被它“拿捏”了

微软Office Plus吊打WPS Office&#xff1f; 微软的Office套件在全球范围内内享有盛誉&#xff0c;其强大的功能和广泛的应用场景使其在办公、娱乐乃至生活的各个角落都显得不可或缺。 而与之相对&#xff0c;WPS Office作为国内办公软件的佼佼者&#xff0c;与微软的较量已历…

探新路建“枢纽” 湖南深耕中非经贸合作“试验田”

湖南作为中国与非洲经贸合作的重要窗口&#xff0c;积极推动中非经贸关系的发展和深化。通过构建覆盖全产业链的高效运作模式&#xff0c;湖南企业能够在一周内将肯尼亚干制鳀鱼加工成为麻辣鲜香的劲仔深海小鱼并投入中国市场。此外&#xff0c;湖南还致力于推动非洲优质农产品…

gitee和idea集成

1 集成插件 2 配置账号密码 3 直接将项目传到仓库 4直接从gitee下载项目

题目:斤斤计较得小Z(蓝桥OJ 2047)

问题描述&#xff1a; 题解&#xff1a; 做法一&#xff08;kmp模板&#xff09;&#xff1a; #include <bits/stdc.h> using namespace std;const int N 1e6 9; char s[N], p[N]; int nex[N];int main() {ios::sync_with_stdio(0), cin.tie(0), cout.tie(0);// p: 子…

Stable Diffusion——SDXL Turbo让 AI 出图速度提高10倍

摘要 在本研究中&#xff0c;我们提出了一种名为对抗扩散蒸馏&#xff08;ADD&#xff09;的创新训练技术&#xff0c;它能够在1至4步的采样过程中&#xff0c;高效地对大规模基础图像扩散模型进行处理&#xff0c;同时保持图像的高质量。该方法巧妙地结合了分数蒸馏技术&…

记录linux从0部署java项目(宝塔)

目录 一、安装宝塔可视化界面 二、部署前端 三、部署后端 1、配置并连接Mysql数据库 2、配置并连接redis 3、安装jdk 这里先记录一个安装后遇到的问题 安装openJDK 四、检查 一、安装宝塔可视化界面 宝塔面板下载&#xff0c;免费全能的服务器运维软件 运行安装脚本 安…