Vue $nextTick

news2024/11/15 21:34:39

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

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

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

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

 

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

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

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

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

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

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

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

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

相关文章

C++标准模板(STL)- 类型支持 (类型特性,is_union,is_class,is_function)

类型特性 类型特性定义一个编译时基于模板的结构&#xff0c;以查询或修改类型的属性。 试图特化定义于 <type_traits> 头文件的模板导致未定义行为&#xff0c;除了 std::common_type 可依照其所描述特化。 定义于<type_traits>头文件的模板可以用不完整类型实例…

Ubuntu中查看电脑有多少个核——lscpu

1. 使用lscpu命令: 打开终端并输入以下命令: lscpu你会看到与CPU相关的详细信息。查找"CPU(s)"这一行来看总的核心数。另外&#xff0c;“Core(s) per socket”表示每个插槽或每个物理CPU的核数&#xff0c;“Socket(s)”表示物理CPU的数量。将这两个值相乘即得到总…

MyBatis开启二级缓存

MyBatis开启二级缓存 前言 MyBatis-Plus&#xff08;简称MP&#xff09;是一个基于MyBatis的增强工具&#xff0c;提供了更便捷的CRUD操作和其他功能。与MyBatis相比&#xff0c;MyBatis-Plus并没有引入自己的缓存机制&#xff0c;而是直接使用了MyBatis的缓存机制。 在MyBati…

【Linux】第五站:Linux权限

文章目录 一、shell命令以及运行原理二、Linux下用户的分类1.root用户和普通用户的切换2.对一条指令的提权 三、什么叫做权限1.权限2.文件的属性3.文件类型4.权限属性 四、更改权限1. chmod 更改文件的属性2. chown 更改拥有者3. chgrp更改所属组4.chown一次性更改拥有者和所属…

12种常见的恶意软件类型与防范建议

1、病毒 病毒是迄今为止最常见的恶意软件类型之一。它是一种能够感染、破坏计算机设备&#xff0c;并在其运行系统上自我复制的程序。由于病毒是自我复制的&#xff0c;一旦安装并运行&#xff0c;它们就可以在同一网络上自动从一台设备传播到另一台设备&#xff0c;无需人为干…

网络(番外篇)can网络知识

通常ECU发出的网络管理报文ID Base Address Node ID Mifa项目向外发的网络管理报文0x418&#xff0c;就是DBC根据基地址加上节点ID定义的。 报文属性是 NmAsrMessage即应答网络报文。 DBC里关于整个网络管理的参数定义&#xff0c;确定好后导入达芬奇&#xff0c;就是直接…

简单的谈谈VPN是什么、类型、使用场景以及工作原理?

作者&#xff1a;久孤776 个人主页&#xff1a;久孤776_python-CSDN博客 作者会持续更新网络知识以及关于python的知识期待你的关注 目录 一、vpn是什么 二、vpn的类型 1. 远程访问VPN 2. 点对点VPN 3. 入口站点VPN 4. 专线VPN 5. 客户端对站点VPN 三、VPN的使用场景 1…

通过python操作neo4j

在neo4j中创建结点和关系 创建结点 创建电影结点 例如&#xff1a;创建一个Movie结点&#xff0c;这个结点上带有三个属性{title:‘The Matrix’, released:1999, tagline:‘Welcome to the Real World’} CREATE (TheMatrix:Movie {title:The Matrix, released:1999, tagl…

从零开始:开发直播商城APP的技术指南

时下&#xff0c;直播商城APP已经成了线上购物、电子商务的核心组成&#xff0c;本文将为您提供一个全面的技术指南&#xff0c;帮助您从零开始开发一个直播商城APP。我们将涵盖所有关键方面&#xff0c;包括技术堆栈、功能模块、用户体验和安全性。 第一部分&#xff1a;技术…

Mybatis的Mapper文件报错:Tag name expected

目录 一、Mapper文件的错误信息 二、原因分析 三、解决方案 1、解决方式一&#xff1a;CDATA 2、解决方式二&#xff1a;预定义字符 一、Mapper文件的错误信息 在使用MyBatis时&#xff0c;我们通常会写一些sql语句。如下图&#xff0c;有时候我们会直接使用比较符号&…

继续畅通工程(最小生成树+并查集)

我刚开始的想法是&#xff0c;既然有已经修好的路&#xff0c;就先把这些修好的路全都加到集合中&#xff0c;即直接把他们Union&#xff0c;不加其长度&#xff0c;然后再将剩下的排序&#xff0c;按Kruskal的算法来进行。 但是这种想法可能有什么问题&#xff0c;只过了一般…

Vscode中不显示.ipynb文件单元格行号

找到设置&#xff0c;搜索line number&#xff1a; 看到下面那个Notebook: Line Numbers 控制单元格编辑器中行号的显示。&#xff0c;选择on即可&#xff1b;

网络原理之TCP/IP

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

CRM客户管理系统源码 带移动端APP+H5+小程序

CRM客户管理系统源码 带移动端APPH5小程序 开发环境: thinkphp mysql 功能介绍&#xff1a; 1、 办公管理&#xff1a;审批管理、工作报告、日程管理、办公审批、公告管理 2、 客户管理&#xff1a;我的客户、客户列表、成交客户、行业类别、预查、地区列表、客户状态、客…

嘴笨的技术人员怎么发言

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

【优选算法系列】第一节.滑动窗口(209. 长度最小的子数组和3. 无重复字符的最长子串)

作者简介&#xff1a;大家好&#xff0c;我是未央&#xff1b; 博客首页&#xff1a;未央.303 系列专栏&#xff1a;优选算法系列 每日一句&#xff1a;人的一生&#xff0c;可以有所作为的时机只有一次&#xff0c;那就是现在&#xff01;&#xff01;&#xff01;&#xff01…

结构体指针的引入

概念引入 结构体指针类似于前面学习过的指针&#xff0c;我们先回忆下指针&#xff1a;指针就是地址&#xff0c;指针变量就是存放地址的变量。而结构体也是变量&#xff0c;变量访问有两种方式:1.变量名&#xff0c; 2.地址&#xff0c;之前案例&#xff0c;是用变量名访问。…

rhcsa安装及配置

RHCSA LINUX 所需软件&#xff1a;VmwareWorkStation 16 rhel-baseos-9.0-x86_64-dvd 镜像文件 Xshell 远程终端工具 「链接&#xff1a;https://pan.xunlei.com/s/VNh9sAs1R591Vr2pounMmyyCA1?pwde42h# 提取码&#xff1a;e42h”复制这段内容后打开手机迅雷App&…

某赛驱动器调节工具DM-Series使用笔记

某赛驱动器调节工具DM-Series使用笔记 简介RJ11通讯定义DM-Series界面更改驱动盒的参数观察串口发送出去的数据得出结果CRC参数模型设置电流值与16进制值对照 简介 某赛驱动器的盒调节电流或其他参数。我以DM85x为例&#xff0c;通过串口通讯修改电流值大小&#xff0c;虽然可…

1.Vue—简介、实例与容器、MVVM模型

文章目录 一、Vue简介1.1 特点1.2 搭建Vue开发环境1.2.1 开发版1.2.2 生产版 1.3 下载Vue开发工具1.3.1 GitHub方式1.3.2 国内方式 1.4 消除环境提示 二、 入门程序2.1 HelloWord2.2 分析Hello案例2.3.1 多容器对一实例2.3.2 多实例对应一容器2.3.3 总结 三、MVVM模型 一、Vue简…