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

♥ vue中$nextTick()

news 2025/10/3 15:55:19

♥ 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

【Axure高保真原型】引导弹窗

今天和大家中分享引导弹窗的原型模板&#xff0c;载入页面后&#xff0c;会显示引导弹窗&#xff0c;适用于引导用户使用页面&#xff0c;点击完成后&#xff0c;会显示下一个引导弹窗&#xff0c;直至最后一个引导弹窗完成后进入首页。具体效果可以点击下方视频观看或打开下方…...

编程新知 2025/10/2 1:47:11

HTML 语义化

目录 HTML 语义化HTML5 新特性HTML 语义化的好处语义化标签的使用场景最佳实践 HTML 语义化 HTML5 新特性 标准答案&#xff1a; 语义化标签&#xff1a; <header>&#xff1a;页头<nav>&#xff1a;导航<main>&#xff1a;主要内容<article>&#x…...

编程新知 2025/9/29 6:46:20

synchronized 学习

学习源&#xff1a; https://www.bilibili.com/video/BV1aJ411V763?spm_id_from333.788.videopod.episodes&vd_source32e1c41a9370911ab06d12fbc36c4ebc 1.应用场景 不超卖&#xff0c;也要考虑性能问题&#xff08;场景&#xff09; 2.常见面试问题&#xff1a; sync出…...

编程新知 2025/9/8 2:34:58

CTF show Web 红包题第六弹

提示 1.不是SQL注入 2.需要找关键源码 思路 进入页面发现是一个登录框&#xff0c;很难让人不联想到SQL注入&#xff0c;但提示都说了不是SQL注入&#xff0c;所以就不往这方面想了 ​ 先查看一下网页源码&#xff0c;发现一段JavaScript代码&#xff0c;有一个关键类ctfs…...

编程新知 2025/9/30 8:10:51

vue3 定时器-定义全局方法 vue+ts

1.创建ts文件 路径&#xff1a;src/utils/timer.ts 完整代码&#xff1a; import { onUnmounted } from vuetype TimerCallback (...args: any[]) > voidexport function useGlobalTimer() {const timers: Map<number, NodeJS.Timeout> new Map()// 创建定时器con…...

编程新知 2025/8/9 0:31:20

相机Camera日志分析之三十一：高通Camx HAL十种流程基础分析关键字汇总（后续持续更新中）

【关注我，后续持续新增专题博文，谢谢！！！】 上一篇我们讲了：有对最普通的场景进行各个日志注释讲解，但相机场景太多，日志差异也巨大。后面将展示各种场景下的日志。 通过notepad++打开场景下的日志，通过下列分类关键字搜索，即可清晰的分析不同场景的相机运行流程差异…...

编程新知 2025/9/24 22:50:47

Python 包管理器 uv 介绍

Python 包管理器 uv 全面介绍 uv 是由 Astral&#xff08;热门工具 Ruff 的开发者&#xff09;推出的下一代高性能 Python 包管理器和构建工具&#xff0c;用 Rust 编写。它旨在解决传统工具&#xff08;如 pip、virtualenv、pip-tools&#xff09;的性能瓶颈&#xff0c;同时…...

编程新知 2025/8/16 15:34:02

tomcat指定使用的jdk版本

说明 有时候需要对tomcat配置指定的jdk版本号&#xff0c;此时&#xff0c;我们可以通过以下方式进行配置 设置方式 找到tomcat的bin目录中的setclasspath.bat。如果是linux系统则是setclasspath.sh set JAVA_HOMEC:\Program Files\Java\jdk8 set JRE_HOMEC:\Program Files…...

编程新知 2025/6/10 21:11:28

跨平台商品数据接口的标准化与规范化发展路径：淘宝京东拼多多的最新实践

在电商行业蓬勃发展的当下&#xff0c;多平台运营已成为众多商家的必然选择。然而&#xff0c;不同电商平台在商品数据接口方面存在差异&#xff0c;导致商家在跨平台运营时面临诸多挑战&#xff0c;如数据对接困难、运营效率低下、用户体验不一致等。跨平台商品数据接口的标准…...

编程新知 2025/9/30 15:17:15

PydanticAI快速入门示例

参考链接&#xff1a;https://ai.pydantic.dev/#why-use-pydanticai 示例代码 from pydantic_ai import Agent from pydantic_ai.models.openai import OpenAIModel from pydantic_ai.providers.openai import OpenAIProvider# 配置使用阿里云通义千问模型 model OpenAIMode…...

编程新知 2025/9/29 15:00:16