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

Vue3_2024_7天【回顾上篇watch常见的后两种场景】___续

Vue3中监听多条数据的两种使用

1.watch【使用上一章写法,监听两个属性,然后执行相应操作…】
在这里插入图片描述

2.watchEffect【相对于使用watch,watchEffect默认页面初始加载,有点类似加配置:立即执行 immediate】
在这里插入图片描述

代码:

<template><div style="background-color: #eeeeee;"><div>当前水温 {{water_wen}} (单位 / 摄氏度)</div><div>当前水位 {{water_height}}(单位 / 米)</div></div><div style="display:flex; ;"><button @click="updateWater_wen()">修改-水温 </button><button @click="updatewater_height()">修改-水位</button></div>
</template>
<script name="Greg_05"></script><script setup lang="ts">
import {ref,watch,watchEffect} from 'vue';
let water_wen=ref(10);
let water_height=ref(0);//修改
function updateWater_wen(){water_wen.value+=10
}
function updatewater_height(){water_height.value+=1
}//监听:水温>60度或水位>20米,则请求接口报警!
//第一种写法:使用watch去监听 
// watch([water_wen,water_height],(newVal,oldVal)=>{
//   console.log("水温或水位变化了",newVal,oldVal)
//   let [new_water_wen,new_water_height] =newVal;
//   if(new_water_wen>60||new_water_height>20){
//     console.log("开始报警......");
//   }
// })
//第二种:不用告诉它监听谁,它会自己去判断 ,页面初始上来即执行,类似给watch配置indes立刻执行
watchEffect(()=>{if(water_wen.value>60||water_height.value>20){console.log("开始报警......");}
})</script><style>
</style>

相关文章:

Vue3_2024_7天【回顾上篇watch常见的后两种场景】___续

Vue3中监听多条数据的两种使用 1.watch【使用上一章写法&#xff0c;监听两个属性&#xff0c;然后执行相应操作…】 2.watchEffect【相对于使用watch&#xff0c;watchEffect默认页面初始加载&#xff0c;有点类似加配置&#xff1a;立即执行 immediate】 代码&#xff1a; …...

Gemini即将收费,GPT无需注册?GPT3.5白嫖和升级教程

&#x1f310;Gemini 即将开始收费 开发者“白嫖”的好日子到头了 - Gemini将开始收费&#xff0c;影响使用Google AI for Developers提供的Gemini API的用户。 - Gemini API将引入按量付费定价&#xff0c;需要注意新的服务条款。 - 用户需在5月2日之前停止使用Gemini API和Go…...

【协议篇:Http与Https】

1. Http 1.1 Http的定义 超文本传输协议&#xff08;Hypertext Transfer Protocol&#xff0c;HTTP&#xff09;是用于分布式、协作式和超媒体信息系统的应用层协议。它是互联网上最广泛应用的数据通信协议之一&#xff0c;尤其对于万维网&#xff08;WWW&#xff09;服务而言…...

WPS二次开发系列:WPS SDK初始化

作者持续关注WPS二次开发专题系列&#xff0c;持续为大家带来更多有价值的WPS开发技术细节&#xff0c;如果能够帮助到您&#xff0c;请帮忙来个一键三连&#xff0c;更多问题请联系我&#xff08;QQ:250325397&#xff09; 本文将详细介绍WPS SDK初始化&#xff0c;帮您能够更…...

EXCEL地理数据处理工具(地图任务)

版本号 作者 修订内容 发布日期 1.0 小O 更新至0705版 2022-4-28 1.1 小O 更新至0772版 2024年4月3日 一、概述 小O地图EXCEL插件版提供基于EXCEL表格进行地理数据处理、地图可视化、地图绘图等功能&#xff0c;地理工具是用户使用频率很高的功能模块。地理工具能…...

软件设计原则:迪米特法则

定义 迪米特法则&#xff08;Law of Demeter, LoD&#xff09;&#xff0c;又称最少知识原则&#xff0c;它指导我们在设计软件时&#xff0c;应当尽量减少对象之间的交互&#xff0c;一个对象应该对其他对象有尽可能少的了解。具体来说&#xff0c;一个对象应该只调用属于以下…...

MongoDB聚合运算符:$max

文章目录 语法使用空值和缺失值的处理数组操作数的处理 举例在$group阶段使用在$setWindowFields阶段使用在$project阶段使用 $max聚合运算符用于返回最大值。 $max对于不同的类型的值使用BSON的比较顺序。 $max可以用于下面的这些阶段&#xff1a; $addFields$bucket$bucket…...

神经网络学习笔记10——RNN、ELMo、Transformer、GPT、BERT

系列文章目录 参考博客1 参考博客2 文章目录 系列文章目录前言一、RNN1、简介2、模型结构3、RNN公式分析4、RNN的优缺点及优化1&#xff09;LSTM是RNN的优化结构2&#xff09;GRU是LSTM的简化结构 二、ELMo1、简介2、模型结构1&#xff09;输入2&#xff09;左右双向上下文信…...

Java23种设计模式

本文主要是对Java中一些常用的设计模式进行讲解 后期会进行不断的更新&#xff0c;欢迎浏览 23种设计模式 创建型模式&#xff0c;共五种&#xff1a;工厂方法模式、抽象工厂模式、建造者模式、原型模式、单例模式。结构型模式&#xff0c;共七种&#xff1a;适配器模式、桥接…...

pieces of cake concerning torchtorchvision

1. version match torchvision的版本对应关系 2. utilize tqdm to present process bar lay a pbar from tqdm import tqdm pbar tqdm(unit"batch", filesys.stdout,totallen(self.training_dataloader)) #处理单位为batch pbar2 tqdm(range(20), descIt\s a t…...

如何在Python中处理JSON数据?

如何在Python中处理JSON数据&#xff1f; 在Python中处理JSON数据是一个常见的任务&#xff0c;因为JSON&#xff08;JavaScript Object Notation&#xff09;是一种轻量级的数据交换格式&#xff0c;它易于人阅读和编写&#xff0c;同时也易于机器解析和生成。Python的内置库…...

站群服务器如何提高搜索引擎排名

站群服务器是一种专门为多个相关联的网站提供支持的服务器&#xff0c;旨在通过网站集合的形式提高搜索引擎排名和曝光度。那么站群服务器如何提高搜索引擎排名呢?Rak部落小编为您整理发布。 站群服务器提高搜索引擎排名的原理主要在于以下几个方面&#xff1a; - **提高网站…...

Redis安装-Docker

安装redis的docker容器 1、创建redis挂载目录 mkdir -p /liuchaoxu/redis/{data,conf}2、复制配置文件 在 /liuchaoxu/redis/conf 目录中创建文件 redis.conf&#xff0c;文件从 redis-6.2.7.tar.gz 中解压获取 修改默认配置(从上至下依次)&#xff1a; #bind 127.0.0.1 …...

day16-二叉树part03

104.二叉树的最大深度 &#xff08;优先掌握递归&#xff09; 根节点的高度就是二叉树的最大深度,后序遍历到叶子节点&#xff0c;对遍历高度取最小 class solution {/*** 递归法*/public int maxDepth(TreeNode root) {if (root null) {return 0;}int leftDepth maxDepth(ro…...

上位机图像处理和嵌入式模块部署(qmacvisual亮度检测)

【 声明&#xff1a;版权所有&#xff0c;欢迎转载&#xff0c;请勿用于商业用途。 联系信箱&#xff1a;feixiaoxing 163.com】 前面我们说过&#xff0c;在机器视觉当中&#xff0c;对于光源的处理要非常小心。这里面不仅包括了选择什么样的光源&#xff0c;还取决于怎样使用…...

防止推特Twitter账号被冻结,应该选什么代理类型IP?

在处理多个 Twitter 帐号时&#xff0c;选择合适的代理IP对于避免大规模帐户暂停至关重要。现在&#xff0c;问题出现了&#xff1a;哪种类型的代理是满足您需求的最佳选择&#xff1f;下面文章将为你具体讲解推特账号冻结原因以及重点介绍如何选择代理IP。 一、推特账号被冻结…...

【二叉树】Leetcode 114. 二叉树展开为链表【中等】

二叉树展开为链表 给你二叉树的根结点 root &#xff0c;请你将它展开为一个单链表&#xff1a; 展开后的单链表应该同样使用 TreeNode &#xff0c;其中 right 子指针指向链表中下一个结点&#xff0c;而左子指针始终为 null 。展开后的单链表应该与二叉树 先序遍历 顺序相同…...

2024年150道高频Java面试题(二十)

39. 说一下 HashMap 的实现原理&#xff1f; HashMap 是 Java 中使用非常普遍的一种基于散列的映射数据结构&#xff0c;主要用于存储键值对。它允许使用任何非空对象作为键和值&#xff0c;主要实现原理如下&#xff1a; 数组 链表 红黑树&#xff1a;HashMap 内部主要由一…...

Docker-Compose容器编排

​ 基本介绍 使用一个Dockerfile模板文件&#xff0c;可以很方便的定义一个适合自己使用的自定义镜像。但在工作中经常会碰到需要多个容器相互配合来完成某项任务或运行某个项目的情况。例如要运行一个django项目&#xff0c;除了django容器本身&#xff0c;往往还需要再加上…...

nvm 安装多个版本的Node npm

先安装nvm 管理工具 git安装地址 找到安装包 下载然后安装 https://github.com/coreybutler/nvm-windows/releases/tag/1.1.11nvm常用命令 命令说明nvm version查看nvm版本nvm ls查看所有已经安装的Nodejs版本nvm list installed查看所有已经安装的Nodejs版本nvm ls availab…...

【网络安全产品大调研系列】2. 体验漏洞扫描

前言 2023 年漏洞扫描服务市场规模预计为 3.06&#xff08;十亿美元&#xff09;。漏洞扫描服务市场行业预计将从 2024 年的 3.48&#xff08;十亿美元&#xff09;增长到 2032 年的 9.54&#xff08;十亿美元&#xff09;。预测期内漏洞扫描服务市场 CAGR&#xff08;增长率&…...

Linux相关概念和易错知识点(42)(TCP的连接管理、可靠性、面临复杂网络的处理)

目录 1.TCP的连接管理机制&#xff08;1&#xff09;三次握手①握手过程②对握手过程的理解 &#xff08;2&#xff09;四次挥手&#xff08;3&#xff09;握手和挥手的触发&#xff08;4&#xff09;状态切换①挥手过程中状态的切换②握手过程中状态的切换 2.TCP的可靠性&…...

JVM垃圾回收机制全解析

Java虚拟机&#xff08;JVM&#xff09;中的垃圾收集器&#xff08;Garbage Collector&#xff0c;简称GC&#xff09;是用于自动管理内存的机制。它负责识别和清除不再被程序使用的对象&#xff0c;从而释放内存空间&#xff0c;避免内存泄漏和内存溢出等问题。垃圾收集器在Ja…...

c++ 面试题(1)-----深度优先搜索(DFS)实现

操作系统&#xff1a;ubuntu22.04 IDE:Visual Studio Code 编程语言&#xff1a;C11 题目描述 地上有一个 m 行 n 列的方格&#xff0c;从坐标 [0,0] 起始。一个机器人可以从某一格移动到上下左右四个格子&#xff0c;但不能进入行坐标和列坐标的数位之和大于 k 的格子。 例…...

【ROS】Nav2源码之nav2_behavior_tree-行为树节点列表

1、行为树节点分类 在 Nav2(Navigation2)的行为树框架中,行为树节点插件按照功能分为 Action(动作节点)、Condition(条件节点)、Control(控制节点) 和 Decorator(装饰节点) 四类。 1.1 动作节点 Action 执行具体的机器人操作或任务,直接与硬件、传感器或外部系统…...

大数据学习(132)-HIve数据分析

​​​​&#x1f34b;&#x1f34b;大数据学习&#x1f34b;&#x1f34b; &#x1f525;系列专栏&#xff1a; &#x1f451;哲学语录: 用力所能及&#xff0c;改变世界。 &#x1f496;如果觉得博主的文章还不错的话&#xff0c;请点赞&#x1f44d;收藏⭐️留言&#x1f4…...

MySQL 知识小结(一)

一、my.cnf配置详解 我们知道安装MySQL有两种方式来安装咱们的MySQL数据库&#xff0c;分别是二进制安装编译数据库或者使用三方yum来进行安装,第三方yum的安装相对于二进制压缩包的安装更快捷&#xff0c;但是文件存放起来数据比较冗余&#xff0c;用二进制能够更好管理咱们M…...

苹果AI眼镜:从“工具”到“社交姿态”的范式革命——重新定义AI交互入口的未来机会

在2025年的AI硬件浪潮中,苹果AI眼镜(Apple Glasses)正在引发一场关于“人机交互形态”的深度思考。它并非简单地替代AirPods或Apple Watch,而是开辟了一个全新的、日常可接受的AI入口。其核心价值不在于功能的堆叠,而在于如何通过形态设计打破社交壁垒,成为用户“全天佩戴…...

在 Spring Boot 项目里,MYSQL中json类型字段使用

前言&#xff1a; 因为程序特殊需求导致&#xff0c;需要mysql数据库存储json类型数据&#xff0c;因此记录一下使用流程 1.java实体中新增字段 private List<User> users 2.增加mybatis-plus注解 TableField(typeHandler FastjsonTypeHandler.class) private Lis…...

算法打卡第18天

从中序与后序遍历序列构造二叉树 (力扣106题) 给定两个整数数组 inorder 和 postorder &#xff0c;其中 inorder 是二叉树的中序遍历&#xff0c; postorder 是同一棵树的后序遍历&#xff0c;请你构造并返回这颗 二叉树 。 示例 1: 输入&#xff1a;inorder [9,3,15,20,7…...