Vue $nextTick

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

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

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

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

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

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

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

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

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

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

相关推荐
ct97810 分钟前
WebGL开发
前端·gis·webgl
C_心欲无痕23 分钟前
前端页面渲染方式:CSR、SSR、SSG
前端
果粒蹬i42 分钟前
生成式 AI 质量控制:幻觉抑制与 RLHF 对齐技术详解
前端·人工智能·easyui
筱歌儿1 小时前
TinyMCE-----word表格图片进阶版
开发语言·javascript·word
Ama_tor2 小时前
obsidian进阶の插件系列|Templater从小白到菜鸟
javascript·markdown·插件·obsidian
WordPress学习笔记2 小时前
解决Bootstrap下拉菜单一级链接无法点击的问题
前端·bootstrap·html
Never_Satisfied2 小时前
C#插值字符串中大括号表示方法
前端·c#
wuhen_n2 小时前
初识TypeScript
javascript·typescript
w***76552 小时前
JS vs jQuery:核心差异解析
开发语言·javascript·jquery
踢球的打工仔2 小时前
typescript-类
前端·javascript·typescript