Vue异步更新、$nextTick

需求:编辑标题, 编辑框自动聚焦
1. 点击编辑,显示编辑框
2. 让编辑框, 立刻获取焦点
this. isShowEdit = true // 显示输入框
this . $refs . inp . focus () // 获取焦点
问题:"显示之后",立刻获取焦点是不能成功的!
原因: Vue 是 异步更新 DOM (提升性能)

 

$nextTick: 等 DOM 更新后 , 才会触发执行此方法里的函数体
语法: this.$nextTick(函数体)

 

1. Vue是异步更新 DOM 的
2. 想要在 DOM 更新完成之后做某件事,可以使用 $nextTick

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/8146.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

24 鼠标常用事件

鼠标进入:enterEvent鼠标离开:leaveEvent鼠标按下:mousePressEvent鼠标释放:mouseRelaseEvent鼠标移动:mouseMoveEvent 提升为自定义控件MyLabel 代码: //mylabel.h #ifndef MYLABEL_H #define MYLABEL_H#…

易班开放应用授权重定向,出现跨域的解决方案

问题描述 今天开发H5网站需要接入易班,经过易班授权然后重定向(code: 302),使用axios发请求,但是前后端均配置跨域的情况下,不管怎么弄都是一直跨域 但是我们看network,network中对应请求的res…

微服务初始

今天准备开始学习微服务,使用微服务肯定是因为他有好处。 首先了解到的三种架构,传统单体,集群架构,微服务架构 单体架构 有单点问题,如果宕机所有的服务都不可用所有业务的功能模块都聚集在一起,如果代…

tinkerCAD案例:9. Saw Shaped Wrench 锯形扳手

tinkerCAD案例:9. Saw Shaped Wrench 锯形扳手 ln this lesson you will learn how to create a cool saw shaped wrench. 在本课中,您将学习如何制作一个很酷的锯形扳手。 Start the lesson by dragging a polygon to the workplane. 通过将多边形拖动…

Windows实现端口转发(附配置过程图文详解)

文章目录 1. 前言2. 命令提示符3. 防火墙4. netsh 命令4.1 查看已有的转发规则4.2 新增转发规则4.3 删除转发规则 5. 图解汇总6. 欢迎纠正~ 1. 前言 利用Windows端口转发,实现本地设备 ⬅➡ 公网主机 ⬅➡ 远端服务器 2. 命令提示符 以管理员身份打开“命令提示…

python调用百度ai将图片识别为表格excel

python调用百度ai将图片识别为表格excel ocr ocr 百度ai官方文档:https://ai.baidu.com/ai-doc/OCR/Ik3h7y238 import requests import json import base64 import time文档:https://ai.baidu.com/ai-doc/OCR/Ik3h7y238 # 获取access_token def get_acc…

vue3+ts+element-plus 之使用node.js对接mysql进行表格数据展示

vue3tselement-plus axiosnode.jsmysql开发管理系统之表格展示 ✏️ 1. 新建一个node项目* 初始化node* 安装可能用到的依赖* 配置文件目录* 添加路由router1. 添加router.js文件,添加一个test目录2. 修改app.js ,引入router📒 3. 启动并在浏览器打开 * …

【1++的C++初阶】之适配器

👍作者主页:进击的1 🤩 专栏链接:【1的C初阶】 文章目录 一,什么是适配器二,栈与队列模拟实现三,优先级队列四,reverse_iterator 一,什么是适配器 适配器作为STL的六大组…

【爬虫逆向案例】某道翻译js逆向—— sign解密

声明:本文只作学习研究,禁止用于非法用途,否则后果自负,如有侵权,请告知删除,谢谢! 【爬虫逆向案例】某道翻译js逆向—— sign解密 1、前言2、步骤3、源码4、号外 1、前言 相信各位小伙伴在写…

SAMStable-Diffusion集成进化!分割、生成一切!AI绘画新玩法

自SAM「分割一切」模型推出之后,二创潮就开始了,有想法有行动!飞桨AI Studio开发者会唱歌的炼丹师就创作出SAM进化版,将SAM、Stable Diffusion集成,实现「分割」、「生成」能力二合一,并部署为应用&#xf…

JVM - 运行时数据区域

文章目录 程序计数器栈堆方法区知识延申 -- 字符串常量池 程序计数器 并发情况下,会发生线程之间的上下文切换,当 线程1 的CPU时间片用完后,需要程序计数器记录 线程1 的下一条JVM指令的地址,等下一次 线程1 继续运行的时&#x…

水环境综合治理监测系统:筑牢城市水生态安全屏障

水是生命之源,是人类赖以生存的基础。然而,随着工业化、城市化的快速发展,水污染问题日益凸显,给居民的环境卫生以及用水安全带来了巨大的威胁。因此,加强水环境综合治理,保护水资源和维护生态平衡&#xf…

28.1 kibana

Kibana 是一个免费且开放的用户界面,能够对 Elasticsearch 数据进行可视化操作,从跟踪查询负载,到理解请求如何流经整个应用,都能轻松完成。 1.Kibana安装 注意要与ES版本保持一致 https://www.elastic.co/downloads/past-relea…

看完这篇,别再说不会Spring 分库分表了

多数据源,读写分离,分库分表,基本上已经是现在任何一个项目的基本配置了,在之前的文章Spring多数据源实现https://blog.csdn.net/wangerrong/article/details/131910740 里讲了多数据源的实现,其实已经包含了读写分离…

Linux使用教程

一、Linux命令基础 1、ls、ll命令——展示数据 ①ls命令——平铺展示数据 其中ls命令以平铺的方式展现数据 ②ll命令——列表展示数据 ll命令以列表的方式展现数据 -a选项,表示:all的意思,即列出全部文件(包含隐藏的文件/文件夹…

ARM寄存器组织

一、寄存器二、ARM寄存器三、专用寄存器四、CPSR寄存器 一、寄存器 概念 寄存器是处理器内部的存储器,没有地址 作用 一般用于暂时存放参与运算的数据和运算结果 分类 包括通用寄存器、专用寄存器、控制寄存器 二、ARM寄存器 注 在某个特定模式下只能使用当前模…

Web浪漫历程:揭秘二十年间与您“约会”的浏览器发展

🧑‍💼 个人简介:一个不甘平庸的平凡人🍬 🖥️ Node专栏:Node.js从入门到精通 🖥️ TS知识总结:十万字TS知识点总结 👉 你的一键三连是我更新的最大动力❤️!…

Kafka基础架构与核心概念

Kafka简介 Kafka是由Apache软件基金会开发的一个开源流处理平台,由Scala和Java编写。Kafka是一种高吞吐量的分布式发布订阅消息系统,它可以处理消费者在网站中的所有动作流数据。架构特点是分区、多副本、多生产者、多订阅者,性能特点主要是…

手机照片误删除?无需担忧,点击这里,即可轻松恢复

手机照片误删除?无需担忧,点击这里,即可轻松恢复 开头:在数字化时代,手机已成为我们生活中不可或缺的伙伴。随着手机摄影的普及,我们记录了许多珍贵的瞬间和回忆。然而,有时候我们不小心误删除…

Python编译过程和执行原理

hello,这里是Token_w的文章,主要讲解python的基础学习,希望对大家有所帮助 整理不易,感觉还不错的可以点赞收藏评论支持,感谢! 目录 一. Python执行原理二. Python内部执行过程2.1 编译过程概述2.2 过程图解…