Vue $nextTick

我们用一个例子来说明$nextTick的作用:

我们用一个变量showIpt来控制input框的显示和隐藏,默认是隐藏。

我们点击一个按钮后显示这个输入框的同时,input还要自动获取焦点。

但是我们点击按钮过后并没有生效。

为什么?this.showIpt=true执行过后接着就是执行this.$refs.ipt.focus() ,所有的代码执行完毕后将解析好的DOM放到页面上去。

也就是说,focus() 的时候DOM还没解析呢!

因此,我们就可以使用$nextTick() 来解决这个问题:

this.$nextTick( // 执行函数 )

$nextTick() 的作用就是在下一次DOM更新结束后执行其指定的回调。

当数据改变后,要对更新后的DOM进行一些操作时,就可以在$nextTick() 的回调函数中执行。

相关推荐
整點薯條7 小时前
Vue3+vite创建项目架构文件说明总结
前端·javascript·vue.js
掘金一周8 小时前
想问问掘友们:AI 时代,资深开发的核心价值到底在哪里?| 沸点周刊 7.23
前端·人工智能·后端
橘子星8 小时前
🚀 手把手带你写一个端侧 AI 应用的"加载进度条"与"聊天对话框"
前端·人工智能
37.2℃9959 小时前
专业的Claude Design解决方案
前端·算法
Jolyne_9 小时前
ng-zorro-table列宽resize后宽度是NaN的源码调试记录
前端
liwulin05069 小时前
【ollama】自定义结构化输出
linux·前端·数据库·ollama
前端甜糖9 小时前
记录We码开发者工具的一个bug
前端·javascript
程序员黑豆9 小时前
鸿蒙应用开发教程:以红绿灯切换为例,掌握条件渲染的核心用法
前端·harmonyos
猫3289 小时前
echarts 日常问题解决
前端·javascript·echarts
新中地GIS开发老师9 小时前
地信职业百科④:GIS开发工程师
前端·数据库·gis·webgis·三维gis开发