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

Vue--1.7watch侦听器（监视器）

news 2026/5/12 7:41:34

作用：监视数据变化，执行一些业务逻辑或异步操作。

语法：

1.简单写法->简单类型数据，直接监视

    const app = new Vue({el: '#app',data: {words:''},watch:{words(newValue,oldValue){}}})
    const app = new Vue({el: '#app',data: {obj: {words: ''}},watch: {'obj.words'(newValue) {}}})

案例：翻译软件

<!doctype html>
<html><head><meta charset="utf-8">
</head><body><div id="app"><textarea rows="10" cols="40" v-model="obj.words"></textarea><textarea rows="10" cols="40" v-model="result"></textarea></div><script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script><script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script><script>const app = new Vue({el: '#app',data: {obj: {words: ''},result: '',timer: null},watch: {'obj.words'(newValue) {clearTimeout(this.timer)//防抖this.timer = setTimeout(async () => {const res = await axios({url: 'https://applet-base-api-t.itheima.net/api/translate',params: {words: newValue}})this.result = res.data.data}, 300)}}})</script>
</body></html>

2.完整写法->添加额外配置项

1）deep:true对复杂类型深度监视

2）immediate:true初始化立刻执行一次handler方法

    const app = new Vue({el: '#app',data: {obj: {words: '',lang:''}},watch: {数据属性名:{deep:true,//深度监视immediate: true,//立即执行，一进入页面handler就立刻执行handler(newValue){}}}})

案例：翻译软件Pro

<!doctype html>
<html><head><meta charset="utf-8">
</head><body><div id="app">翻译成语言：<select v-model="obj.lang"><option value="english">英语</option><option value="franch">法语</option><option value="italy">意大利</option></select><br><br><textarea rows="10" cols="40" v-model="obj.words"></textarea><textarea rows="10" cols="40" v-model="result"></textarea></div><script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script><script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script><script>const app = new Vue({el: '#app',data: {obj: {words: '',lang: 'english'},result: '',timer: null},watch: {obj: {deep: true,immediate: true,handler(newValue) {clearTimeout(this.timer)//防抖this.timer = setTimeout(async () => {const res = await axios({url: 'https://applet-base-api-t.itheima.net/api/translate',params: newValue})this.result = res.data.data}, 300)}}}})</script>
</body></html>

相关文章：

Vue--1.7watch侦听器（监视器）

作用&#xff1a;监视数据变化&#xff0c;执行一些业务逻辑或异步操作。 语法&#xff1a; 1.简单写法->简单类型数据&#xff0c;直接监视 const app new Vue({el: #app,data: {words:},watch:{words(newValue,oldValue){}}}) const app new Vue({el: #app,data: {obj…...

编程日记 2023/10/9 12:52:24

序列：全序关系

一个序列满足全序关系必须满足以下条件&#xff1a; 反对称性&#xff1a;若 a ≤ b a\le b a≤b&#xff0c;则 b ≥ a b\ge a b≥a传递性&#xff1a;若 a ≤ b a\le b a≤b 且 b ≤ c b\le c b≤c&#xff0c;则 a ≤ c a\le c a≤c完全性&#xff1a; a ≤ b a\le b …...

编程日记 2023/10/9 12:50:22

100M服务器能同时容纳多少人访问？

100M的服务器带宽能够同时容纳的用户访问量需要考虑以下几个关键因素: &#x1f449;1.单个用户的平均访问流量大小 这取决于网站内容,是否有多媒体等。一般文本类网站每用户每次访问在50-100KB。 &#x1f449;2.每个用户的平均访问页面 通常每次访问会打开多个页面 &…...

编程日记 2023/10/9 12:49:21

Javascript 笔记：函数调用与函数上下文

在 JavaScript 中&#xff0c;函数上下文通常指的是函数在执行时的当前对象的引用&#xff0c;这通常用 this 关键字表示。this 关键字在不同的执行上下文中可能引用到不同的对象。 1 全局上下文 当 this 关键字用在全局上下文&#xff08;不在任何函数内部&#xff09;&#…...

编程日记 2023/10/9 12:48:20

【WebService】C#搭建的标准WebService接口，在使ESB模版作为参数无法获取参数数据

一、问题说明 1.1 问题描述 使用C# 搭建WebService接口&#xff0c;并按照ESB平台人员的要求&#xff0c;将命名空间改为"http://esb.webservice",使用PostmanESB平台人员提供的入参示例进行测试时&#xff0c;callBussiness接口参数message始终为null。 以下是ES…...

编程日记 2023/10/9 12:47:19

Sqlserver关于tempdb临时数据库文件个数的最佳实践

官方文档 https://learn.microsoft.com/zh-cn/sql/relational-databases/databases/tempdb-database?viewsql-server-ver16 https://learn.microsoft.com/en-US/troubleshoot/sql/database-engine/performance/recommendations-reduce-allocation-contention 一般而言&#x…...

编程日记 2023/10/9 12:46:18

【Java】微服务——微服务介绍和Eureka注册中心

目录 1.微服务介绍2.服务拆分和远程调用2.1.提供者与消费者 3.Eureka注册中心3.1.Eureka的结构和作用3.2.Eureka的结构3.3.搭建Eureka服务3.3.1.引入eureka依赖3.3.2.编写配置文件 3.4.服务注册及拉1&#xff09;引入依赖2&#xff09;配置文件3&#xff09;启动多个user-servi…...

编程日记 2023/10/9 12:45:17

C++ virtual 虚函数 虚基类

https://blog.csdn.net/xbb123456rt/article/details/81986691 基类指针可以指向一个派生类对象&#xff0c;但派生类指针不能指向基类对象。 可以在基类中将被重写的成员函数设置为虚函数&#xff0c;其含义是&#xff1a;当通过基类的指针或者引用调用该成员函数时&#xf…...

编程日记 2023/10/9 12:44:17

redis分布式秒杀锁

-- 获取锁标识&#xff0c;是否与当前线程一致&#xff1f; if(redis.call(get, KEYS[1]) ARGV[1]) then-- 一致&#xff0c;删除return redis.call(del, KEYS[1]) end -- 不一致&#xff0c;直接返回 return 0package com.platform.lock;public interface ILock {/*** 获取锁…...

编程日记 2023/10/9 12:43:16

【Redis】String内部编码方式

String内部编码方式 int: 8个字节的长整型embstr: 小于等于39个字节的字符串raw: 大于39个字节的字符串...

编程日记 2023/10/9 12:42:15

川西旅游网系统-前后端分离（前台vue 后台element UI，后端servlet）

前台&#xff1a;tour_forword: 川西旅游网前端----前台 (gitee.com) 后台&#xff1a;tour_back: 川西旅游网-------后台 (gitee.com) 后端 &#xff1a;tour: 川西旅游网------后端 (gitee.com)...

编程日记 2023/10/9 12:41:15

Paddle使用pyinstaller打包出错的解决方法

使用PyQt5开发了一个基于paddle ocr的文字识别程序&#xff0c;打包的时候报错了。给大家分享一下解决方法https://juejin.cn/post/7287562282669883451 为了测试paddle模块的打包问题&#xff0c;所以当前demo.py只引用了paddleOCR模块demo.py from paddleocr import PaddleO…...

编程日记 2023/10/9 12:40:14

【Java acm】特殊输入

input: [[1,2,3 ], [4, 5,6], [7,8]] output: [[1, 2, 3], [4, 5, 6], [7, 8]] 思路 按行读入, 然后进行字符串处理, 将其他字符替换为空字符.在split(,) repalceAll(“\s”,“”), 将所有空白字符替换成空字符(包括空格, 制表, 换行等) 代码实现 import java.util.*;publ…...

编程日记 2023/10/9 12:38:12

在Ubuntu 20.04搭建最小实验环境

sudo apt-get -y install --no-install-recommends wget gnupg ca-certificates安装导入GPG公钥所需的依赖包。 sudo wget -O - https://openresty.org/package/pubkey.gpg | sudo apt-key add -导入GPG密钥。 sudo apt-get -y install --no-install-recommends software-p…...

编程日记 2023/10/9 12:37:11

使用uwsgi部署Flask

安装 这里直接使用包管理器提供的版本&#xff0c;不过建议大家使用pip来安装&#xff0c;会少一些坑&#xff1a; (Debian/Ubuntu) apt-get install uwsgi uwsgi-plugin-python3 或使用pip安装&#xff1a; pip3 install uwsgi 试试看 [demo.py] from flask import Flas…...

编程日记 2023/10/9 12:36:09

Android平台实现lottie动画

1、lottie动画简介 Lottie 是一个应用十分广泛动画库&#xff0c;适用于Android、iOS、Web、ReactNative、Windows的库&#xff0c;它解析了用Bodymovin导出为json的Adobe After Effects动画&#xff0c;并在移动和网络上进行了原生渲染。它提供了一套完整得从AE到各个终端的…...

编程日记 2023/10/9 12:35:07

JAVA练习百题之求矩阵对角线之和

题目&#xff1a;求一个3*3矩阵对角线元素之和 程序分析 求一个3x3矩阵的对角线元素之和&#xff0c;我们需要将矩阵的左上到右下以及左下到右上两条对角线上的元素相加。 一个3x3矩阵如下所示&#xff1a; 1 2 3 4 5 6 7 8 9左上到右下的对角线元素和为1 5 9 15&…...

编程日记 2023/10/9 12:34:05

MEM备考打卡

今天是2023.10.9距离考试还有75天 三年前就想考MEM每次总是有各种原因最后选择了放弃&#xff0c;没时间、自制力差、害怕失败。。。。放弃后确还是会想如果自己当时没有放弃是不是就能考上&#xff0c;所以这次不管能不能考上拼搏75天&#xff0c;不能总是停留在想象。加油&a…...

编程日记 2023/10/9 12:32:02

短视频矩阵源码开发部署---技术解析

一、短视频SEO源码搜索技术需要考虑以下几点&#xff1a; 1. 关键词优化&#xff1a;通过研究目标受众的搜索习惯&#xff0c;选择合适的关键词&#xff0c;并在标题、描述、标签等元素中进行优化&#xff0c;提高视频的搜索排名。 2. 内容质量&#xff1a;优质、有吸引力的内…...

编程日记 2023/10/9 12:31:01

百度小程序制作源码 百度引流做关键词排名之技巧

百度作为国内最大的搜索引擎&#xff0c;对于关键词排名和流量获取的策略格外重要&#xff0c;下面给大家分享一个百度小程序制作源码和做百度引流、关键词排名的一些技巧。 移动设备的普及和微信小程序的火热&#xff0c;百度也推出了自己的小程序。百度小程序与微信小程序类…...

编程日记 2023/10/9 12:30:00

测试测量工程师必读：从EMC暗室到传感器选型的实战解析

1. 项目概述&#xff1a;一场关于测试测量知识的“周五挑战”又到了周五下午&#xff0c;手头的项目报告写得差不多了&#xff0c;代码也调试得告一段落&#xff0c;是不是感觉大脑需要换个频道放松一下&#xff1f;作为一名在电子工程和测试测量领域摸爬滚打了十几年的老工程师…...

编程新知 2026/5/12 7:39:31

FPGA开发实战：从问题定位到系统化解决，构建硬件设计核心能力

1. 项目概述&#xff1a;当FPGA问题来袭&#xff0c;你的第一反应是什么&#xff1f;如果你正在设计一个嵌入式系统&#xff0c;或者在调试一块数字电路板时&#xff0c;遇到了一个用微控制器&#xff08;MCU&#xff09;难以解决的时序、并行处理或接口协议问题&#xff0c;你…...

编程新知 2026/5/12 5:41:39

Google Docs接入Gemini后，这6类高频写作场景效率飙升210%（附可复制Prompt库）

更多请点击&#xff1a; https://intelliparadigm.com 第一章&#xff1a;Gemini深度集成Google Docs的底层机制解析 Gemini 与 Google Docs 的深度集成并非简单的 API 调用叠加&#xff0c;而是依托 Google 的统一 AI 基础设施&#xff08;AISI&#xff09;和文档实时协作协议…...

编程新知 2026/5/12 5:18:51

嵌入式系统如何应对VR/AR的技术挑战：从硬件选型到系统优化

1. 虚拟现实与嵌入式系统的交汇点2016年&#xff0c;如果你在嵌入式系统开发圈子里&#xff0c;听到最多的词除了“物联网”&#xff0c;大概就是“虚拟现实”了。那一年&#xff0c;Oculus Rift消费者版正式发货&#xff0c;HTC Vive也刚刚上市&#xff0c;一股VR热潮席卷了科…...

编程新知 2026/5/12 4:27:02

MCP Loom：快速构建AI工具与数据连接器的开发框架

1. 项目概述&#xff1a;MCP Loom&#xff0c;一个连接AI与真实世界的“织布机”如果你最近在折腾AI应用开发&#xff0c;特别是想让你的AI助手&#xff08;比如Claude、Cursor等&#xff09;能直接操作你电脑上的文件、数据库&#xff0c;甚至调用外部API&#xff0c;那么你很…...

编程新知 2026/5/12 3:43:39

从零构建高频无线传输系统：调幅技术实战解析

1. 调幅无线传输系统入门指南 第一次接触调幅无线传输系统时&#xff0c;我也被各种专业术语搞得一头雾水。简单来说&#xff0c;调幅(AM)就是通过改变载波信号的幅度来传递信息的技术。想象一下快递员送包裹&#xff1a;载波就像快递车&#xff0c;而我们要发送的信息就是包裹…...

编程新知 2026/5/12 3:25:42

2026届最火的十大AI辅助写作平台解析与推荐

Ai论文网站排名&#xff08;开题报告、文献综述、降aigc率、降重综合对比&#xff09; TOP1. 千笔AI TOP2. aipasspaper TOP3. 清北论文 TOP4. 豆包 TOP5. kimi TOP6. deepseek 在当下这个学术环境当中&#xff0c;AI辅助论文的写作已然变成了一种具备高效性的工具。借助…...

编程新知 2026/5/12 3:23:11

工程实践：AI 编程从提示词走向流水线，才需要 API 中转站

这类内容的核心判断应该换一下&#xff1a;用户不是先想买 API&#xff0c;中间才想到 Claude / Codex&#xff1b;很多时候正相反&#xff0c;是先想用 Claude / Codex 提升开发效率&#xff0c;才开始寻找稳定、可接入、可支付、可迁移的 API 入口。目标用户画像想把需求分析…...

编程新知 2026/5/11 21:05:59

FPGA与ASIC核心技术对比与选型指南

1. FPGA与ASIC的本质差异解析在数字电路设计领域&#xff0c;FPGA&#xff08;现场可编程门阵列&#xff09;和ASIC&#xff08;专用集成电路&#xff09;代表着两种截然不同的技术路线。FPGA本质上是一种"硬件可重构"的半导体器件&#xff0c;其核心结构由可编程逻辑…...

编程新知 2026/5/11 17:21:40

FanControl风扇识别故障排查指南：从零开始解决“风扇隐身“问题

FanControl风扇识别故障排查指南&#xff1a;从零开始解决"风扇隐身"问题 【免费下载链接】FanControl.Releases This is the release repository for Fan Control, a highly customizable fan controlling software for Windows. 项目地址: https://gitcode.com/G…...

编程新知 2026/5/11 17:11:01