当前位置: 首页 > 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…...

【网络】每天掌握一个Linux命令 - iftop

在Linux系统中&#xff0c;iftop是网络管理的得力助手&#xff0c;能实时监控网络流量、连接情况等&#xff0c;帮助排查网络异常。接下来从多方面详细介绍它。 目录 【网络】每天掌握一个Linux命令 - iftop工具概述安装方式核心功能基础用法进阶操作实战案例面试题场景生产场景…...

day52 ResNet18 CBAM

在深度学习的旅程中&#xff0c;我们不断探索如何提升模型的性能。今天&#xff0c;我将分享我在 ResNet18 模型中插入 CBAM&#xff08;Convolutional Block Attention Module&#xff09;模块&#xff0c;并采用分阶段微调策略的实践过程。通过这个过程&#xff0c;我不仅提升…...

Auto-Coder使用GPT-4o完成:在用TabPFN这个模型构建一个预测未来3天涨跌的分类任务

通过akshare库&#xff0c;获取股票数据&#xff0c;并生成TabPFN这个模型 可以识别、处理的格式&#xff0c;写一个完整的预处理示例&#xff0c;并构建一个预测未来 3 天股价涨跌的分类任务 用TabPFN这个模型构建一个预测未来 3 天股价涨跌的分类任务&#xff0c;进行预测并输…...

智能在线客服平台:数字化时代企业连接用户的 AI 中枢

随着互联网技术的飞速发展&#xff0c;消费者期望能够随时随地与企业进行交流。在线客服平台作为连接企业与客户的重要桥梁&#xff0c;不仅优化了客户体验&#xff0c;还提升了企业的服务效率和市场竞争力。本文将探讨在线客服平台的重要性、技术进展、实际应用&#xff0c;并…...

UR 协作机器人「三剑客」:精密轻量担当(UR7e)、全能协作主力(UR12e)、重型任务专家(UR15)

UR协作机器人正以其卓越性能在现代制造业自动化中扮演重要角色。UR7e、UR12e和UR15通过创新技术和精准设计满足了不同行业的多样化需求。其中&#xff0c;UR15以其速度、精度及人工智能准备能力成为自动化领域的重要突破。UR7e和UR12e则在负载规格和市场定位上不断优化&#xf…...

均衡后的SNRSINR

本文主要摘自参考文献中的前两篇&#xff0c;相关文献中经常会出现MIMO检测后的SINR不过一直没有找到相关数学推到过程&#xff0c;其中文献[1]中给出了相关原理在此仅做记录。 1. 系统模型 复信道模型 n t n_t nt​ 根发送天线&#xff0c; n r n_r nr​ 根接收天线的 MIMO 系…...

python报错No module named ‘tensorflow.keras‘

是由于不同版本的tensorflow下的keras所在的路径不同&#xff0c;结合所安装的tensorflow的目录结构修改from语句即可。 原语句&#xff1a; from tensorflow.keras.layers import Conv1D, MaxPooling1D, LSTM, Dense 修改后&#xff1a; from tensorflow.python.keras.lay…...

GruntJS-前端自动化任务运行器从入门到实战

Grunt 完全指南&#xff1a;从入门到实战 一、Grunt 是什么&#xff1f; Grunt是一个基于 Node.js 的前端自动化任务运行器&#xff0c;主要用于自动化执行项目开发中重复性高的任务&#xff0c;例如文件压缩、代码编译、语法检查、单元测试、文件合并等。通过配置简洁的任务…...

三分算法与DeepSeek辅助证明是单峰函数

前置 单峰函数有唯一的最大值&#xff0c;最大值左侧的数值严格单调递增&#xff0c;最大值右侧的数值严格单调递减。 单谷函数有唯一的最小值&#xff0c;最小值左侧的数值严格单调递减&#xff0c;最小值右侧的数值严格单调递增。 三分的本质 三分和二分一样都是通过不断缩…...

逻辑回归暴力训练预测金融欺诈

简述 「使用逻辑回归暴力预测金融欺诈&#xff0c;并不断增加特征维度持续测试」的做法&#xff0c;体现了一种逐步建模与迭代验证的实验思路&#xff0c;在金融欺诈检测中非常有价值&#xff0c;本文作为一篇回顾性记录了早年间公司给某行做反欺诈预测用到的技术和思路。百度…...