Vue $nextTick

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

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

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

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

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

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

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

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

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

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

相关推荐
该怎么办呢2 分钟前
Source/Core/DeveloperError.js
开发语言·javascript·ecmascript
于慨24 分钟前
tauri
java·服务器·前端
riyue66631 分钟前
封装 WebSocket 工具类
网络·vue.js·websocket·网络协议·v
贼爱学习的小黄1 小时前
NC BIP参照开发
java·前端·nc
weixin_462901971 小时前
ESP32 LED控制代码解析
javascript
小江的记录本1 小时前
【MyBatis-Plus】MyBatis-Plus的核心特性、条件构造器、分页插件、乐观锁插件
java·前端·spring boot·后端·sql·tomcat·mybatis
小张会进步1 小时前
数组:二维数组
java·javascript·算法
光影少年1 小时前
如何进行前端性能优化?
前端·性能优化
Dxy12393102161 小时前
js如何把字符串转数字
开发语言·前端·javascript
爱写bug的野原新之助1 小时前
爬虫之补环境:加载原型链
前端·javascript·爬虫