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

♥ vue中$nextTick()

news 2026/4/22 2:05:54

♥ 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

【微软官方未公开的AOT兼容性清单】：Dify v0.7.2+ C# 14原生AOT支持矩阵与RuntimeBinder绕过方案

第一章&#xff1a;C# 14 原生 AOT 部署 Dify 客户端对比评测报告C# 14 引入的原生 AOT&#xff08;Ahead-of-Time&#xff09;编译能力显著提升了 .NET 应用在边缘设备与云原生环境中的启动性能与内存 footprint。本章聚焦于基于 C# 14 构建的 Dify 官方 REST API 客户端 SDK …...

编程新知 2026/4/22 1:10:39

GPU云服务特征定价原理与LLM推理优化实践

1. GPU云服务特征定价的核心原理在传统云计算定价模型中&#xff0c;时间计费&#xff08;Time-based Pricing&#xff09;一直是主流方案。这种模式下&#xff0c;用户为GPU实例支付固定的小时费用&#xff0c;而无论实际使用了多少计算资源。随着大语言模型&#xff08;LLM&a…...

编程新知 2026/4/22 0:46:37

Ubuntu 20.04 装 ROS Noetic，我为什么建议你跳过 rosdep 这一步？

Ubuntu 20.04 安装 ROS Noetic&#xff1a;为什么你可以安全跳过 rosdep 初始化&#xff1f; 在机器人操作系统&#xff08;ROS&#xff09;的安装文档中&#xff0c;rosdep init 和 rosdep update 这两个步骤总是被列为必选项。但作为一个在三个不同国家的机器人实验室工作过的…...

编程新知 2026/4/22 0:25:54

2026届毕业生推荐的降AI率方案推荐

Ai论文网站排名&#xff08;开题报告、文献综述、降aigc率、降重综合对比&#xff09; TOP1. 千笔AI TOP2. aipasspaper TOP3. 清北论文 TOP4. 豆包 TOP5. kimi TOP6. deepseek 想要降低AI生成内容的比率&#xff0c;就得从多个维度去优化文本。其一&#xff0c;要调整句…...

编程新知 2026/4/22 0:13:34

基于外置摄像头的实时信号灯状态监测与报警系统

基于外置摄像头的实时信号灯状态监测与报警系统 摘 要 本文详细阐述了一套基于外置USB摄像头的实时信号灯状态监测系统的完整开发过程。该系统通过OpenCV计算机视觉库实时采集摄像头视频流，利用HSV色彩空间的红灯多区间检测算法精确识别三个信号灯的状态，并结合时间戳记录和…...

编程新知 2026/4/21 21:45:10

保姆级教程：用Python 3.11和Poetry从零部署微软GraphRAG v2.7.0（附Azure OpenAI配置）

从零部署微软GraphRAG v2.7.0&#xff1a;Python 3.11与Poetry实战指南 当开发者第一次接触微软开源的GraphRAG框架时&#xff0c;往往会被其强大的知识图谱构建能力所吸引——这个基于图结构的检索增强生成系统&#xff0c;能通过智能节点关联实现远超传统RAG的语义理解深度。…...

编程新知 2026/4/21 21:42:58

零基础学AI，别急着跑代码：先看清这3个代价再动手

先说结论 零基础学AI的最大成本不是时间&#xff0c;而是方向选择错误导致的重复投入&#xff0c;比如过早追求深度学习而忽略机器学习基础。 实践环境搭建和数据处理往往比模型训练更耗时&#xff0c;免费资源如Colab有使用限制&#xff0c;本地部署需要硬件投入。 AI入门容…...

编程新知 2026/4/21 20:34:20

从家庭账本到预测模型：一个Python案例讲透线性回归怎么用（附OLS源码）

从家庭账本到预测模型&#xff1a;一个Python案例讲透线性回归怎么用&#xff08;附OLS源码&#xff09; 翻开记账本&#xff0c;你是否好奇每月消费和收入之间究竟存在怎样的数学关系&#xff1f;当收入增加1000元时&#xff0c;消费会同步增长多少&#xff1f;这些问题背后隐…...

编程新知 2026/4/21 19:11:50

别再踩坑了！Spring Boot项目里Jackson处理LocalDateTime的正确姿势（附完整配置代码）

Spring Boot项目中Jackson处理LocalDateTime的终极指南 如果你正在使用Spring Boot开发Java应用&#xff0c;并且遇到了LocalDateTime序列化的问题&#xff0c;那么这篇文章就是为你准备的。作为现代Java开发中最常用的日期时间API之一&#xff0c;LocalDateTime在JSON序列化时…...

编程新知 2026/4/21 19:05:37

低功耗工控机在电池供电机器人中的应用

大家好&#xff0c;我是阿强&#xff0c;在工控行业深耕了 17 年。如今&#xff0c;移动机器人已经广泛应用于物流、仓储、巡检、配送等各个领域&#xff0c;而续航能力一直是制约移动机器人发展的关键因素。电池供电的机器人对控制单元的功耗有着非常严格的要求&#xff0c;低…...

编程新知 2026/4/21 17:27:42