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

♥ vue中$nextTick()

news 2026/2/9 23:22:14

♥ vue中$nextTick()

① 语法


this.$nextTick(回调函数)

② 作用

在下一次 DOM 更新结束后执行其指定的回调

使用时机----(比方Echarts地图的渲染)
当改变数据后，要基于更新后的新DOM进行某些操作时，要在nextTick所指定的回调函数中执行

③ 案例:

实现点击按钮，使用文本框对页面中的标题数据进行修改，且文本框能够自动获取焦点，文本框失去焦点保存修改后的标题，且文本框隐藏

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><div id="root"><h1>{{title}}</h1><input type="text" v-model="title" v-show="isEdit" ref="inputTitle" @blur="handlerBlur"><button v-show="!isEdit" @click="handlerEdit">点击修改标题</button></div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script>
const vm = new Vue({el: '#root',data: {title: 'hello world',// 是否处于编辑状态isEdit: false},methods: {// 对标题进行编辑handlerEdit() {// 修改状态为编辑状态this.isEdit = !this.isEdit// 直接让输入框获取焦点// 此时函数中的代码还未完全执行完成，vue不会进行模板的重新解析// 所以更新后的还未放入页面，此时获取焦点无效// this.$refs.inputTitle.focus()// 使用nextTick()在页面解析完成后让文本框获取焦点// 基于更新后的新输入框进行操作，使其获取焦点this.$nextTick(() => {this.$refs.inputTitle.focus();})},// 处理文本框失去焦点handlerBlur() {// 修改状态为不处于编辑状态this.isEdit = !this.isEdit}},
})
</script></html>

相关文章：

♥ vue中$nextTick()

♥ vue中$nextTick() ① 语法 this.$nextTick(回调函数)② 作用 在下一次 DOM 更新结束后执行其指定的回调 使用时机----(比方Echarts地图的渲染) 当改变数据后&#xff0c;要基于更新后的新DOM进行某些操作时&#xff0c;要在nextTick所指定的回调函数中执行 ③ 案例: 实现…...

编程日记 2023/8/13 4:01:13

小程序裂变怎么做？小程序裂变机制有哪些？

做了小程序就等于“生意上门”&#xff1f;其实并不是这样。小程序跟流量平台较为明显的区别就在于小程序并非“自带流量”&#xff0c;而是需要企业利用自己的营销推广能力来建立引流渠道&#xff0c;从而完成用户的拉新和留存、转化。因此&#xff0c;想要用小程序来增加自己…...

编程日记 2023/8/13 4:00:11

Openlayers实战：使几何图形适配窗口

Openlayers开发的项目中，有一种应用非常重要，就是绘制或者显示出几何图形后，让几何图形居中并适配到窗口下，这样能让用户很好的聚焦到所要看的内容中去。 这里使用了fit的这个view 的方法，具体的操作请参考示例源代码。 效果图 源代码 /* * @Author: 大剑师兰特（xiaozh…...

编程日记 2023/8/13 3:59:08

活动发布会邀请媒体6步走

传媒如春雨&#xff0c;润物细无声&#xff0c;大家好&#xff0c;我是51媒体网胡老师。 邀请媒体参加活动发布会对信息的传播&#xff0c;企业品牌建设有诸多的好处&#xff0c;今天就与大家分享下邀请媒体参加活动报道的6个步骤&#xff1a; 1. 策划与准备&#xff1a; -明…...

编程日记 2023/8/13 3:58:07

W6100-EVB-PICO作为TCP Client 进行数据回环测试（五）

前言 上一章我们用W6100-EVB-PICO开发板通过DNS解析www.baidu.com&#xff08;百度域名&#xff09;成功得到其IP地址&#xff0c;那么本章我们将用我们的开发板作为客户端去连接服务器&#xff0c;并做数据回环测试&#xff1a;收到服务器发送的数据&#xff0c;并回传给服务器…...

编程日记 2023/8/13 3:57:02

emqx-5.1.4开源版使用记录

emqx-5.1.4开源版使用记录 windows系统安装eqmx 去官网下载 emqx-5.1.4-windows-amd64.zip&#xff0c;然后找个目录解压 进入bin目录,执行命令启动emqx 执行命令 emqx.cmd start使用emqx 访问内置的web管理页面 浏览器访问地址 http://localhost:18083/#/dashboard/overv…...

编程日记 2023/8/13 3:56:00

Java 线程池的原理与实现

最近在学习线程池、内存控制等关于提高程序运行性能方面的编程技术，线程池就是其中之一，一提到线程，我们会想到以前《操作系统》的生产者与消费者，信号量，同步控制等等。一提到池，我们会想到数据库连接池，但是线程池又如何呢？建议：在阅读本文前，先理一理同步的知识，…...

编程日记 2023/8/13 3:54:58

【idea】点击idea启动没反应

RT 点击idea启动的时候没反应&#xff0c;接着百度报错&#xff0c;基本跟他们的也不一样。 首先我是做版本升级。其次&#xff0c;我之前是破解的。如果你也是跟我一样的话&#xff0c;那问题可能就处在破解上了 解决方式 首先&#xff0c;是跟大部分解决思路一样。先找到项…...

编程日记 2023/8/13 3:53:55

C# Atrribute和反射的简单例子

Attribute 需要以Attribute 结尾, 并继承Attribute namespace AttributeTest {public class HeroAttribute : Attribute{} }namespace AttributeTest {public class SkillAttribute : Attribute{} }namespace AttributeTest {[Hero]public class Blademaster{[Skill]public vo…...

编程日记 2023/8/13 3:52:55

ASP.NET Core - 缓存之分布式缓存

分布式缓存是由多个应用服务器共享的缓存&#xff0c;通常作为访问它的应用服务器的外部服务进行维护。 分布式缓存可以提高 ASP.NET Core 应用的性能和可伸缩性&#xff0c;尤其是当应用由云服务或服务器场托管时。 与其他将缓存数据存储在单个应用服务器上的缓存方案相比&am…...

编程日记 2023/8/13 3:51:53

代理模式（C++）

定义 为其他对象提供一种代理以控制(隔离&#xff0c;使用接口)对这个对象的访问。。 应用场景 在面向对象系统中&#xff0c;有些对象由于某种原因(比如对象创建的开销很大&#xff0c;或者某些操作需要安全控制&#xff0c;或者需要进程外的访问等)直接访问会给使用者、或…...

编程日记 2023/8/13 3:50:52

C# 有效的字母异位词

242 有效的字母异位词 给定两个字符串 和 &#xff0c;编写一个函数来判断 是否是 的字母异位词。stts 注意&#xff1a;若 和 中每个字符出现的次数都相同&#xff0c;则称 和 互为字母异位词。stst 示例 1: 输入: s “anagram”, t “nagaram” 输出: true 示例 2: 输…...

编程日记 2023/8/13 3:49:50

R语言安装包Seurat

环境Ubuntu22&#xff0c;R4.1 also installing the dependencies ‘curl’, ‘openssl’, ‘httr’, ‘plotly’ R包安装的时候报了这个错误ERROR: dependencies httr, plotly are not available for package Seurat 解决方法&#xff0c;退出R&#xff0c;在terminal中键入…...

编程日记 2023/8/13 3:48:47

vue2中使用mixins（混入）和vue3中使用composable

文章目录 一、mixins混入1、 新建mixins文件夹&#xff0c;新建myMixins.js2、myMixins.js 文件3、index.vue 文件&#xff08;要使用的文件&#xff09; mixins 总结二、composable(组合式api composition )1、 新建composables文件夹&#xff0c;新建useEdit.js2、useEdit.js…...

编程日记 2023/8/13 3:47:45

通过OpenTelemetry上报Python-flask应用数据（阿里云）

参考文档 https://help.aliyun.com/document_detail/611711.html?spma2c4g.90499.0.0.34a056ddTu2WWq 先按照 方法一&#xff1a;手动埋点上报Python应用数据 步骤测试上报是否正常。 flas 上报 在 手动埋点上报Python应用数据 的基础上&#xff0c;上报flask应用的数据&#…...

编程日记 2023/8/13 3:46:44

使用node搭建服务器，前端自己写接口，将vue或react打包后生成的dist目录在本地运行

使用node.jsexpress或者使用node.jspm2搭建服务器&#xff0c;将vue或react打包后生成的dist目录在本地运行 vue项目打包后生成的dist目录如果直接在本地打开index.html,在浏览器中会报错&#xff0c;无法运行起来。 通常我是放到后端搭建的服务上面去运行&#xff0c;当时前端…...

编程日记 2023/8/13 3:45:43

一篇文章搞懂如何使用JDBC操作数据库，还有JDBC进阶操作

目录 简介什么是JDBC如何使用JDBC1、获取连接2、操作数据3、关闭连接&#xff0c;释放资源使用技巧 查询操作创建表&#xff0c;插入模拟数据使用Java查询数据的数据SQL注入问题使用PreparedStatement查询 更新操作插入插入并获取主键更新删除 JDBC事务JDBC的批量操作JDBC连接池…...

编程日记 2023/8/13 3:44:42

9.3.2.1网络原理(UDP)

1.UDP的基本特点:无连接,不可靠传输,面向数据报,全双工. 2.1~1024的端口号有特定的含义,不建议使用.比如21:ftp,22:ssh,80:http,443:https. 3.CRC校验算法:循环冗余校验和,把UDP报中的每个字节都依次进行累加,把累加的结果,放到两个字节的变量中,溢出也无所谓,因为都加了一遍.…...

编程日记 2023/8/13 3:43:41

21、stm32使用LTDC驱动LCD

注&#xff1a;本文基于stm32使用FMC驱动SDRAM(IS42S32800G-6BLI)工程继续开发 本例使用安富莱的H743XIH板子驱动LTDC点亮7寸LCD 硬件接线&#xff1a;RGB888 一、cubemx配置 1、LTDC配置 注意此引脚应于上面的硬件接线图一致 2、配置DMA2D 3、背光引脚和触摸引脚 4、时钟…...

编程日记 2023/8/13 3:42:40

合并两个有序链表

就像一个贪吃蛇将两个链表一一的吃进来 class Solution(object):def mergeTwoLists(self, list1, list2):""":type list1: Optional[ListNode]:type list2: Optional[ListNode]:rtype: Optional[ListNode]"""p ListNode(0)cur pwhile list1 a…...

编程日记 2023/8/13 3:41:39

观成科技：隐蔽隧道工具Ligolo-ng加密流量分析

1.工具介绍 Ligolo-ng是一款由go编写的高效隧道工具&#xff0c;该工具基于TUN接口实现其功能&#xff0c;利用反向TCP/TLS连接建立一条隐蔽的通信信道&#xff0c;支持使用Let’s Encrypt自动生成证书。Ligolo-ng的通信隐蔽性体现在其支持多种连接方式&#xff0c;适应复杂网…...

编程新知 2026/2/8 4:37:24

springboot 百货中心供应链管理系统小程序

一、前言 随着我国经济迅速发展&#xff0c;人们对手机的需求越来越大&#xff0c;各种手机软件也都在被广泛应用&#xff0c;但是对于手机进行数据信息管理&#xff0c;对于手机的各种软件也是备受用户的喜爱&#xff0c;百货中心供应链管理系统被用户普遍使用&#xff0c;为方…...

编程新知 2026/2/8 20:41:49

SCAU期末笔记 - 数据分析与数据挖掘题库解析

这门怎么题库答案不全啊日 来简单学一下子来 一、选择题&#xff08;可多选&#xff09; 将原始数据进行集成、变换、维度规约、数值规约是在以下哪个步骤的任务?(C) A. 频繁模式挖掘 B.分类和预测 C.数据预处理 D.数据流挖掘 A. 频繁模式挖掘&#xff1a;专注于发现数据中…...

编程新知 2026/1/24 14:15:43

大数据零基础学习day1之环境准备和大数据初步理解

学习大数据会使用到多台Linux服务器。 一、环境准备 1、VMware 基于VMware构建Linux虚拟机 是大数据从业者或者IT从业者的必备技能之一也是成本低廉的方案 所以VMware虚拟机方案是必须要学习的。 &#xff08;1&#xff09;设置网关 打开VMware虚拟机&#xff0c;点击编辑…...

编程新知 2026/1/25 14:43:07

鱼香ros docker配置镜像报错：https://registry-1.docker.io/v2/

使用鱼香ros一件安装docker时的https://registry-1.docker.io/v2/问题 一键安装指令 wget http://fishros.com/install -O fishros && . fishros出现问题&#xff1a;docker pull 失败 网络不同&#xff0c;需要使用镜像源 按照如下步骤操作 sudo vi /etc/docker/dae…...

编程新知 2025/12/31 6:28:08

在鸿蒙HarmonyOS 5中使用DevEco Studio实现录音机应用

1. 项目配置与权限设置 1.1 配置module.json5 {"module": {"requestPermissions": [{"name": "ohos.permission.MICROPHONE","reason": "录音需要麦克风权限"},{"name": "ohos.permission.WRITE…...

编程新知 2025/10/3 17:30:30

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

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

编程新知 2026/2/2 2:47:37

根据万维钢·精英日课6的内容，使用AI（2025）可以参考以下方法：

根据万维钢精英日课6的内容&#xff0c;使用AI&#xff08;2025&#xff09;可以参考以下方法&#xff1a; 四个洞见 模型已经比人聪明&#xff1a;以ChatGPT o3为代表的AI非常强大&#xff0c;能运用高级理论解释道理、引用最新学术论文&#xff0c;生成对顶尖科学家都有用的…...

编程新知 2026/1/10 1:08:51

华硕a豆14 Air香氛版，美学与科技的馨香融合

在快节奏的现代生活中&#xff0c;我们渴望一个能激发创想、愉悦感官的工作与生活伙伴&#xff0c;它不仅是冰冷的科技工具&#xff0c;更能触动我们内心深处的细腻情感。正是在这样的期许下&#xff0c;华硕a豆14 Air香氛版翩然而至&#xff0c;它以一种前所未有的方式&#x…...

编程新知 2026/1/29 14:27:00

LINUX 69 FTP 客服管理系统 man 5 /etc/vsftpd/vsftpd.conf

FTP 客服管理系统 实现kefu123登录&#xff0c;不允许匿名访问&#xff0c;kefu只能访问/data/kefu目录&#xff0c;不能查看其他目录 创建账号密码 useradd kefu echo 123|passwd -stdin kefu [rootcode caozx26420]# echo 123|passwd --stdin kefu 更改用户 kefu 的密码…...

编程新知 2026/2/9 20:16:17