【vue】watchEffect 自动侦听器

watchEffect:自动监听值的变化

  • 获取旧值时,不是很方便,建议用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, watchEffect } from './vue.esm-browser.js'createApp({setup() {const hobby = ref("")const date = reactive({year: "",month: ""})//自动监听watchEffect(() => {console.log("----- 自动监听开始")console.log(hobby.value)console.log(date.year, date.month)console.log("自动监听结束 -----")})return {date,hobby}}}).mount("#app")</script>
</body></html>

参考

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

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

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

相关文章

每日一练(力扣)

我的思路是暴力枚举: 情况1:相同&#xff0c;就让子串和原串同时后移继续比较 情况2:不相同&#xff0c;就只让原串后移 public int strStr(String haystack, String needle) {if (haystack.length() < needle.length()){return -1;}for (int i 0; i < h…

K8S哲学 - 常见的资源类型

资源类型 namespace kubectl apply 和 kubectl create kubectl apply是声明式的 和 kubectl create是命令式的对吗 deployment 和 job的区别 k8s 的 lable 的意义

【YUNBEE云贝-进阶课】MySQL8.0性能优化实战培训

众多已经学习过MySQL 8.0 OCP认证专家的课程的同学们对 MySQL 8.0 的安装部署、体系结构、配置监控、用户管理、主从复制、系统运维、MGR等基础操作和动手实验有了一定的学习基础.很多学员反馈希望更进一步提升技术能力、解决工作中碰到的性能问题。 针对MySQL8.0的数据库性能优…

DMA的认识

DMA介绍 Q:什么是DMA&#xff1f; DMA( Direct Memory Access&#xff0c;直接存储器访问 ) 提供在 外设与内存 、 存储器和存储器 、 外设 与外设 之间的 高速数据传输 使用。它允许不同速度的硬件装置来沟通&#xff0c;而不需要依赖于 CPU &#xff0c;在这个时间中&am…

算法打卡day34

今日任务&#xff1a; 1&#xff09;62.不同路径 2&#xff09;63.不同路径 II 3&#xff09;复习day10 62.不同路径 题目链接&#xff1a;62. 不同路径 - 力扣&#xff08;LeetCode&#xff09; 一个机器人位于一个 m x n 网格的左上角 &#xff08;起始点在下图中标记为 “S…

数据中心的网络架构设计,打造高效、安全的数字底座

数据中心的网络架构设计 一、数据中心网络架构设计原则 网络,作为数据中心的核心支柱,其结构精妙,由众多二层接入设备与少量三层设备共同编织而成。过去,数据中心网络规模有限,仅凭数十台设备的简单互连便能实现信息的畅通无阻。然而,随着技术与应用需求的飞速增长,数据…

Missing artifact org.opencv:opencv:jar:4.10.0 [opencv-4.10.0.jar]

Missing artifact org.opencv:opencv:jar:4.10.0 [opencv-4.10.0.jar] https://mvnrepository.com/artifact/org.opencv/opencv 根本就没有 找了个旧项目的opencv-410.jar修改下opencv-4.10.0.jar放到目录下面就好了 D:\localRepository\org\opencv\opencv\4.10.0 OpenCV-C…

[HDFS 相关Shell命令]

目录 HDFS 相关Shell命令: 相关文件操作命令: HDFS 相关Shell命令: 注意&#xff0c;下述命令中的<path>代表文件或目录的路径&#xff0c;<local_path>代表本地文件系统的路径&#xff0c;而<hdfs_path>代表HDFS上的路径。使用这些命令时&#xff0c;需要…

类的六个默认成员函数(上)

目录 构造函数 析构函数 拷贝构造函数 对于日期&#xff08;Date&#xff09;类&#xff0c;可以通过 Init 公有方法给对象设置日期&#xff0c;但如果每次创建对象时都调用该方法设置信息&#xff0c;未免有点麻烦&#xff0c;那能否在对象创建时&#xff0c;就将信息设置进…

鸿蒙OS开发学习:【第三方库调用】

介绍 本篇Codelab主要向开发者展示了在Stage模型中&#xff0c;如何调用已经上架到[三方库中心]的社区库和项目内创建的本地库。效果图如下&#xff1a; 相关概念 [Navigation]&#xff1a;一般作为Page页面的根容器&#xff0c;通过属性设置来展示页面的标题、工具栏、菜单。…

政安晨:【Keras机器学习实践要点】(二十七)—— 使用感知器进行图像分类

目录 简介 设置 准备数据 配置超参数 使用数据增强 实施前馈网络&#xff08;FFN&#xff09; 将创建修补程序作为一个层 实施补丁编码层 建立感知器模型 变换器模块 感知器模型 编译、培训和评估模式 政安晨的个人主页&#xff1a;政安晨 欢迎 &#x1f44d;点赞✍…

Spring Boot集成Graphql快速入门Demo

1.Graphql介绍 GraphQL 是一个用于 API 的查询语言&#xff0c;是一个使用基于类型系统来执行查询的服务端运行时&#xff08;类型系统由你的数据定义&#xff09;。GraphQL 并没有和任何特定数据库或者存储引擎绑定&#xff0c;而是依靠你现有的代码和数据支撑。 优势 GraphQL…

npm install 报 ERESOLVE unable to resolve dependency tree 异常解决方法

问题 在安装项目依赖时&#xff0c;很大可能会遇到安装不成功的问题&#xff0c;其中有一个很大的原因&#xff0c;可能就是因为你的npm版本导致的。 1.npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to resolve dependency tree 2.ERESOLVE unable to resolve dependenc…

【C++之queue的应用及模拟实现】

C学习笔记---014 C之queue的应用及模拟实现1、queue的简单介绍2、queue的简单接口应用3、queue的模拟实现3.1、queue的结构一般的构建3.2、queue的适配器模式构建3.3、queue的主要接口函数 4、queue的模拟实现完整代码4.1、一般方式4.2、泛型模式 5、queue巩固练习题5.1、最小栈…

VSCode中 task.json 和 launch.json 的作用和参数解释以及配置教程

前言 由于 VS Code 并不是一个传统意义上的 IDE&#xff0c;所以初学者可能在使用过程中会有很多的疑惑&#xff0c;其中比较常见的一个问题就是 tasks.json和 launch.json两个文件分别有什么作用以及如何配置 tasks.json VSCode 官网提供的 tasks.json 配置教程 使用不同的…

UE4_导入内容_Alembic文件导入器

Alembic文件导入器 Alembic文件格式(.abc)是一个开放的计算机图形交换框架&#xff0c;它将复杂的动画化场景浓缩成一组非过程式的、与应用程序无关的烘焙几何结果。虚幻引擎4(UE4)允许你通过 Alembic导入器 导入你的Alembic文件&#xff0c;这让你可以在外部自由地创建复杂的…

什么是态势感知?

什么是态势感知&#xff1f; 同学&#xff0c;听说过态势感知吗&#xff1f;啥&#xff1f;不知道&#xff1f;不知道很正常&#xff0c;因为态势感知是一个比较小众、比较神秘的概念。为什么态势感知很神秘&#xff0c;首先是因为这是来自军事情报领域的概念&#xff0c;然后…

008Node.js模块、自定义模块和CommonJs

CommonJS API定义很多普通应用程序(主要指非浏览器的应用)使用的API&#xff0c;从而填补了这个空白。它的终极目标是提供一个类似Python&#xff0c;Ruby和Java标 准库。这样的话&#xff0c;开发者可以使用CommonJS API编写应用程序&#xff0c;然后这些应用可以运行在不同的…

【尝试】域名验证:配置github二级目录下的txt文件

【尝试】域名验证&#xff1a;配置github二级目录下的txt文件 写在最前面一、初始化本地仓库二、设置远程仓库1. 远程仓库 URL 没有设置或设置错误添加远程仓库修改远程仓库 2. 访问权限问题3. 仓库不存在步骤 1: 在你的仓库中添加文件步骤 2: 确认GitHub Pages设置步骤 3: 访问…

lua学习笔记21完结篇(lua中的垃圾回收)

print("*****************************lua中的垃圾回收*******************************") text{id24,name"仙贝"} --垃圾回收关键字collectgarbag --获取当前lua占用内存数 k字节 返回值*1024就可以得到具体占用字节数 print(collectgarbage("count&…