第二十七章 Vue异步更新之$nextTick
目录
一、概述
二、完整代码
2.1. main.js
2.2. App.vue
一、概述
需求:编辑标题, 弹出显示编辑框自动聚焦

1. 点击编辑,显示编辑框
2. 让编辑框,立刻获取焦点
我们常规的思路可能会编写如下代码来实现:

问题:"显示之后",立刻获取焦点是不能成功的!
原因:Vue是异步更新DOM (提升性能),当执行获取焦点这段代码时,前面显示输入框在渲染时还没执行结束。
二、完整代码
2.1. main.js
import Vue from 'vue'
import App from './App.vue'Vue.config.productionTip = falsenew Vue({render: h => h(App),
}).$mount('#app')
2.2. App.vue
<template><div class="app"><div v-if="isShowEdit"><input ref="inp" v-model="editValue" type="text"><button>确认</button></div><div v-else><span>{{ title }}</span><button @click="handleEdit">编辑</button></div></div>
</template><script>
export default {data () {return {title: '大标题',editValue: '',isShowEdit: false}},methods: {handleEdit () {// 1. 显示输入框this.isShowEdit = true// 2. 让输入框获取焦点this.$nextTick(() => {this.$refs.inp.focus()})}}
}
</script><style scoped>
.logout {margin: 20px;
}
button {margin: 10px;
}
</style>
相关文章:
第二十七章 Vue异步更新之$nextTick
目录 一、概述 二、完整代码 2.1. main.js 2.2. App.vue 一、概述 需求:编辑标题, 弹出显示编辑框自动聚焦 1. 点击编辑,显示编辑框 2. 让编辑框,立刻获取焦点 我们常规的思路可能会编写如下代码来实现: 问题:…...
【51 Pandas+Pyecharts | 深圳市共享单车数据分析可视化】
文章目录 🏳️🌈 1. 导入模块🏳️🌈 2. Pandas数据处理2.1 读取数据2.2 查看数据信息2.3 处理起始时间、结束时间2.4 增加骑行时长区间列2.5 增加骑行里程区间列 🏳️🌈 3. Pyecharts数据可视化3.1 各…...
【Clikhouse 探秘】ClickHouse 物化视图:加速大数据分析的新利器
👉博主介绍: 博主从事应用安全和大数据领域,有8年研发经验,5年面试官经验,Java技术专家,WEB架构师,阿里云专家博主,华为云云享专家,51CTO 专家博主 ⛪️ 个人社区&#x…...
线程相关题(线程池、线程使用、核心线程数的设置)
目录 线程安全的什么情况用?情况下用线程安全的类? 线程池线程方面的优化 线程池调优主要涉及以下几个关键参数。 线程不安全原因? 1. 共享资源访问冲突 2. 缺乏原子操作 3. 内存可见性问题 4. 重排序问题 如何解决线程不安全的问题࿱…...
2181、合并零之间的节点
2181、[中等] 合并零之间的节点 1、问题描述: 给你一个链表的头节点 head ,该链表包含由 0 分隔开的一连串整数。链表的 开端 和 末尾 的节点都满足 Node.val 0 。 对于每两个相邻的 0 ,请你将它们之间的所有节点合并成一个节点ÿ…...
powerlaw:用于分析幂律分布的Python库
引言 幂律分布在游戏行业中非常重要。在免费游戏模式下,玩家的付费行为往往遵循幂律分布。少数“鲸鱼玩家”贡献了大部分的收入,而大多数玩家可能只进行少量或不进行付费。通过理解和应用幂律分布,游戏开发者可以更好地分析和预测玩家行为&a…...
工作管理实战指南:利用Jira、Confluence等Atlassian工具打破信息孤岛,增强团队协作【含免费指南】
如果工作场所存在超级反派,其中之一可能会被命名为“信息孤岛”,因为它们能够对公司的生产力和协作造成严重破坏。当公司决定使用太多互不关联的工具来完成工作时,“信息孤岛”就会出现,导致团队需要耗费大量时间才能就某件事情达…...
JAVA语言多态和动态语言实现原理
JAVA语言多态和动态语言实现原理 前言invoke指令invokestaticinvokespecialinvokevirtualinvokeintefaceinvokedynamicLambda 总结 前言 我们编码java文件,javac编译class文件,java运行class,JVM执行main方法,加载链接初始化对应…...
阿里云-防火墙设置不当导致ssh无法连接
今天学网络编程的时候,看见有陌生ip连接,所以打开了防火墙禁止除本机之外的其他ip连接: 但是当我再次用ssh的时候,连不上了才发现大事不妙。 折腾了半天,发现阿里云上可以在线向服务器发送命令,所以赶紧把2…...
使用WebAssembly优化Web应用性能
💓 博客主页:瑕疵的CSDN主页 📝 Gitee主页:瑕疵的gitee主页 ⏩ 文章专栏:《热点资讯》 使用WebAssembly优化Web应用性能 引言 WebAssembly 简介 安装工具 创建 WebAssembly 项目 编写 WebAssembly 代码 编译 WebAssem…...
软件测试模型
软件测试模型是在软件开发过程中,用于指导软件测试活动的一系列方法和框架。这些模型帮助测试团队确定何时进行测试、测试什么以及如何测试,从而确保软件的质量和稳定性。 一 V模型 V模型是一种经典的软件测试模型,它由瀑布研发模型演变而来的测试模型…...
动态规划——两个数组的dp问题
目录 一、最长公共子序列 二、不同的子序列 三、通配符匹配 四、正则表达式匹配 五、两个字符串的最小ASCII删除和 六、最长重复子数组 七、交错字符串 一、最长公共子序列 最长公共子序列 第一步:确定状态表示 dp[i][j]:表示字符串 s1 的 [0&am…...
视频QoE测量学习笔记(二)
目录 自适应比特率(ABH或ABS) HAS:HTTP adaptive streaming 自适应本质: HAS正在解决传统流协议中主要关注的几个方面: DASH标准化原因 HAS发展 编码: 影响HAS系统的四个主要问题: 一个健全的HAS方…...
RSA算法详解:原理与应用
RSA算法详解:原理与应用 RSA算法是现代密码学的基石之一,广泛应用于安全通信、数据加密和身份验证等领域。本文将详细介绍RSA算法的原理、实现步骤以及实际应用。 一、RSA算法概述 RSA(Rivest-Shamir-Adleman)算法由Ron Rivest…...
YOLOv6-4.0部分代码阅读笔记-effidehead_fuseab.py
effidehead_fuseab.py yolov6\models\heads\effidehead_fuseab.py 目录 effidehead_fuseab.py 1.所需的库和模块 2.class Detect(nn.Module): 3.def build_effidehead_layer(channels_list, num_anchors, num_classes, reg_max16, num_layers3): 1.所需的库和模块 impo…...
特朗普概念股DJT股票分析:为美国大选“黑天鹅事件”做好准备
猛兽财经核心观点: (1)特朗普媒体科技集团的股价近期已经从年初至今的高点下跌了35%以上。 (2)该公司将面临一个重大的黑天鹅事件。 (3)这一结果将对特朗普媒体科技集团产生重大影响。 随着投资…...
【MySQL】 运维篇—故障排除与性能调优:常见故障的排查与解决
数据库系统在运行过程中可能会遇到各种故障,如性能下降、连接失败、数据损坏等。及时有效地排查和解决这些故障,对于保证系统的稳定性和数据的完整性至关重要。 常见故障及排查方法 1. 数据库连接失败 故障描述:应用程序无法连接到数据库&…...
Android R S T U版本如何在下拉栏菜单增加基本截图功能
本文主要是MTK增加下拉栏开关菜单,功能实现为基本的截图功能,metrics_constants.proto修改 QuickSetting 新增快捷设置图标,以便对应getMetricsCategory获取;一个布局文件,一个配置加载合入实现,一个新增想要实现截图的类。 /frameworks/base/proto/src/metrics_constan…...
C#二叉树原理及二叉搜索树代码实现
一、概念 二叉树(Binary Tree)是一种树形数据结构,其中每个节点最多有两个子节点,分别称为左子节点和右子节点。二叉树的每个节点包含三个部分:一个值、一个指向左子节点的引用和一个指向右子节点的引用。 二、二叉树…...
.eslintrc.js 的解释
如果您的项目中没有 .eslintrc.js 文件,您可以按以下步骤创建并配置 ESLint: 1. 创建 ESLint 配置文件 在您的项目根目录下创建一个新的文件,命名为 .eslintrc.js。 2. 配置 ESLint 规则 在 .eslintrc.js 文件中添加以下内容,…...
基于大模型的 UI 自动化系统
基于大模型的 UI 自动化系统 下面是一个完整的 Python 系统,利用大模型实现智能 UI 自动化,结合计算机视觉和自然语言处理技术,实现"看屏操作"的能力。 系统架构设计 #mermaid-svg-2gn2GRvh5WCP2ktF {font-family:"trebuchet ms",verdana,arial,sans-…...
微服务商城-商品微服务
数据表 CREATE TABLE product (id bigint(20) UNSIGNED NOT NULL AUTO_INCREMENT COMMENT 商品id,cateid smallint(6) UNSIGNED NOT NULL DEFAULT 0 COMMENT 类别Id,name varchar(100) NOT NULL DEFAULT COMMENT 商品名称,subtitle varchar(200) NOT NULL DEFAULT COMMENT 商…...
【HarmonyOS 5 开发速记】如何获取用户信息(头像/昵称/手机号)
1.获取 authorizationCode: 2.利用 authorizationCode 获取 accessToken:文档中心 3.获取手机:文档中心 4.获取昵称头像:文档中心 首先创建 request 若要获取手机号,scope必填 phone,permissions 必填 …...
九天毕昇深度学习平台 | 如何安装库?
pip install 库名 -i https://pypi.tuna.tsinghua.edu.cn/simple --user 举个例子: 报错 ModuleNotFoundError: No module named torch 那么我需要安装 torch pip install torch -i https://pypi.tuna.tsinghua.edu.cn/simple --user pip install 库名&#x…...
Go 并发编程基础:通道(Channel)的使用
在 Go 中,Channel 是 Goroutine 之间通信的核心机制。它提供了一个线程安全的通信方式,用于在多个 Goroutine 之间传递数据,从而实现高效的并发编程。 本章将介绍 Channel 的基本概念、用法、缓冲、关闭机制以及 select 的使用。 一、Channel…...
Java数值运算常见陷阱与规避方法
整数除法中的舍入问题 问题现象 当开发者预期进行浮点除法却误用整数除法时,会出现小数部分被截断的情况。典型错误模式如下: void process(int value) {double half = value / 2; // 整数除法导致截断// 使用half变量 }此时...
C# 表达式和运算符(求值顺序)
求值顺序 表达式可以由许多嵌套的子表达式构成。子表达式的求值顺序可以使表达式的最终值发生 变化。 例如,已知表达式3*52,依照子表达式的求值顺序,有两种可能的结果,如图9-3所示。 如果乘法先执行,结果是17。如果5…...
苹果AI眼镜:从“工具”到“社交姿态”的范式革命——重新定义AI交互入口的未来机会
在2025年的AI硬件浪潮中,苹果AI眼镜(Apple Glasses)正在引发一场关于“人机交互形态”的深度思考。它并非简单地替代AirPods或Apple Watch,而是开辟了一个全新的、日常可接受的AI入口。其核心价值不在于功能的堆叠,而在于如何通过形态设计打破社交壁垒,成为用户“全天佩戴…...
HTML前端开发:JavaScript 获取元素方法详解
作为前端开发者,高效获取 DOM 元素是必备技能。以下是 JS 中核心的获取元素方法,分为两大系列: 一、getElementBy... 系列 传统方法,直接通过 DOM 接口访问,返回动态集合(元素变化会实时更新)。…...
DeepSeek源码深度解析 × 华为仓颉语言编程精粹——从MoE架构到全场景开发生态
前言 在人工智能技术飞速发展的今天,深度学习与大模型技术已成为推动行业变革的核心驱动力,而高效、灵活的开发工具与编程语言则为技术创新提供了重要支撑。本书以两大前沿技术领域为核心,系统性地呈现了两部深度技术著作的精华:…...
