Vue $nextTick

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

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

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

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

 

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

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

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

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

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

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

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

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

相关文章

【PG】PostgreSQL客户端认证pg_hba.conf文件

目录 文件格式 连接类型(TYPE) 数据库(database) 用户(user) 连接地址(address) 格式 IPv4 IPv6 字符 主机名 主机名后缀 IP-address/IP-mask auth-method trust reject scram-sha-256 md5 password gss sspi …

23种设计模式【创建型模式】详细介绍之【建造者模式】

建造者模式:构建复杂对象的精妙设计 设计模式的分类和应用场景总结建造者模式:构建复杂对象的精妙设计建造者模式的核心思想建造者模式的参与者Java示例:建造者模式 设计模式的分类和应用场景总结 可以查看专栏设计模式:设计模式 …

STM32中除零运算,为何程序不崩溃?

在 C 语言中,除零运算会导致异常吗? 在 C 语言中,当一个数除以零时,会导致除法运算错误,通常表现为“除以零”错误或被称为“浮点异常”(floating-point exception)。 对于整数除法&#xff0c…

RHCE---正则表达式

文章目录 前言一、pandas是什么?二、使用步骤 1.引入库2.读入数据总结 前言 一. 文本搜索工具 grep是linux中一种强大的文件搜索过滤工具,可以按照正 则表达式检索文件内容,并把匹配的结果显示到屏幕上 (匹配的内容会标红&#x…

设计模式(15)组合模式

一、介绍: 1、定义:组合多个对象形成树形结构以表示“整体-部分”的关系的层次结构。组合模式对叶子节点和容器节点的处理具有一致性,又称为整体-部分模式。 2、优缺点: 优点: (1)高层模块调…

JAVA设计模式详解(独家AI解析)

JAVA设计模式详解(独家AI解析) 一、JAVA介绍二、JAVA设计模式六大原则三、JAVA设计模式介绍四、JAVA设计模式详解4.1 单例模式4.1.1 懒汉式(Lazy Initialization)4.1.2 饿汉式(Lazy Initialization) 4.2 代…

UE4/5 竖排文字文本

方法一、使用多行文本组件 新建一个Widget Blueprint 添加Text 或者 Editable Text(Multi-Line) 、TextBox(Multi-Line) 组件。 添加文字,调整字号,调整成竖排文字。 在Wrapping (换行)面板中 : 勾选 Auto Wrap te…

RabbitMQ的交换机(原理及代码实现)

1.交换机类型 Fanout Exchange(扇形)Direct Exchange(直连)opic Exchange(主题)Headers Exchange(头部) 2.Fanout Exchange 2.1 简介 Fanout 扇形的,散开的&#xff1…

统计学习方法 决策树

文章目录 统计学习方法 决策树决策树模型与学习特征选择决策树的生成ID3 算法C4.5 的生成算法 决策树的剪枝CART 算法CART 回归树的生成CART 分类树的生成CART 剪枝 统计学习方法 决策树 阅读李航的《统计学习方法》时,关于决策树的笔记。 决策树模型与学习 决策…

java基础 特殊文件

1.Properties属性文件: 1.1使用Properties读取属性文件里的键值对数据: package specialFile;import java.io.FileNotFoundException; import java.io.FileReader; import java.io.IOException; import java.util.Enumeration; import java.util.Propert…

中电文思海辉:塑造全球AI能力,持续强化诸多行业战略

【科技明说 | 重磅专题】 中电文思海辉以前就是叫文思海辉, 这是由之前两家上市软件外包公司文思信息和海辉软件合并而来,2018年当时各自股票以1:1的比例进行整合,双方股东各持有新公司50%的股权,合并后新公司名称为文…

使用 Pyro 和 PyTorch 的贝叶斯神经网络

一、说明 构建图像分类器已成为新的“hello world”。还记得当你第一次接触 Python 时,你的打印“hello world”感觉很神奇吗?几个月前,当我按照PyTorch 官方教程并为自己构建了一个运行良好的简单分类器时,我也有同样的感觉。 我…

牛客网刷题-(7)

🌈write in front🌈 🧸大家好,我是Aileen🧸.希望你看完之后,能对你有所帮助,不足请指正!共同学习交流. 🆔本文由Aileen_0v0🧸 原创 CSDN首发🐒 如…

嘴笨的技术人员怎么发言

对于嘴笨的人来说,即兴发言简直就是灾难,想想自己窘迫的模样,自己都受不了,但职场又避免不了这种场合,所以,就要靠一些技巧让我们顺利打开思路了。 那么,今天就分享几个解救过我的不同场景即兴发…

数据结构介绍与时间、空间复杂度

数据结构介绍 什么是数据结构?什么是算法?数据结构和算法的重要性 数据结构定义 数据结构是计算机科学中研究数据组织、存储和管理的一门学科。数据结构描述了数据对象之间的关系,以及对数据对象进行操作的方法和规则。 常见的数据结构 数…

网络原理之TCP/IP

文章目录 应用层传输层UDP协议TCP协议TCP 的工作机制1. 确认应答2. 超时重传3. 连接管理TCP 的建立连接的过程(三次握手),和断开连接的过程(四次挥手)TCP 断开连接, 四次挥手 3. 滑动窗口5. 流量控制6. 拥塞控制7. 延时应答8. 捎带应答9. 面向字节流10. 异常情况 本章节主要讨论…

vscode不显示横滚动条处理

最近发现vscode打开本地文件不显示水平的滚动条,但是打开一个临时文件是有水平滚动条的。 解决方案 可以一个个试 vscode配置 左下角设置–设置–搜索Scrollbar: Horizontal auto 自动visible 一直展示hidden 一直隐藏 拖动底部状态栏 发现是有的,但是…

国际腾讯云直播推流配置教程!

云直播的服务本质是一个广播的过程,类似于电视台的直播节目通过有线电视网发送给千家万户。为了完成这个过程,云直播需要有采集和推流设备(类似摄像头)、云直播服务(类似电视台的有线电视网)和播放设备&…

华为机试题:HJ3 明明的随机数

目录 第一章、算法题1.1)题目描述1.2)解题思路与答案1.3)牛客链接 友情提醒: 先看文章目录,大致了解文章知识点结构,点击文章目录可直接跳转到文章指定位置。 第一章、算法题 1.1)题目描述 题目描述&…

1818_ChibiOS的计数信号量

全部学习汇总: GreyZhang/g_ChibiOS: I found a new RTOS called ChibiOS and it seems interesting! (github.com) 之前见过计数信号量,也是在FreeRTOS中看到的。也看到过这样的功能在驱动设计中的应用,但是当时没有理解这个使用的方式。 1.…