$nextTick的使用场景介绍

$nextTick使用

Vue更新DOM-异步的

目标: 点击count++, 马上通过"原生DOM"拿标签内容, 无法拿到新值

components/Move.vue - 继续新增第三套代码

<template><div><p>1. 获取原生DOM元素</p><h1 id="h" ref="myH">我是一个孤独可怜又能吃的h1</h1><p>2. 获取组件对象 - 可调用组件内一切</p><Demo ref="de"></Demo><p>3. vue更新DOM是异步的</p><p ref="myP">{{ count }}</p><button @click="btn">点击count+1, 马上提取p标签内容</button></div>
</template><script>
// 目标: 获取组件对象
// 1. 创建组件/引入组件/注册组件/使用组件
// 2. 组件起别名ref
// 3. 恰当时机, 获取组件对象
import Demo from './Child/Demo'
export default {mounted(){console.log(document.getElementById("h")); // h1console.log(this.$refs.myH); // h1let demoObj = this.$refs.de;demoObj.fn()},components: {Demo},data(){return {count: 0}},methods: {btn(){this.count++; // vue监测数据更新, 开启一个DOM更新队列(异步任务)console.log(this.$refs.myP.innerHTML); // 0// 原因: Vue更新DOM异步// 解决: this.$nextTick()// 过程: DOM更新完会挨个触发$nextTick里的函数体this.$nextTick(() => {console.log(this.$refs.myP.innerHTML); // 1})}}
}
</script>

总结: 因为DOM更新是异步的

3.3 $nextTick使用场景

目标: 点击搜索按钮, 弹出聚焦的输入框, 按钮消失

![ n e x t T i c k 使用 ] ( i m a g e s / nextTick使用](images/ nextTick使用](images/nextTick使用.gif)

components/Tick.vue

<template><div><input ref="myInp" type="text" placeholder="这是一个输入框" v-if="isShow"><button v-else @click="btn">点击我进行搜索</button></div>
</template><script>
// 目标: 点按钮(消失) - 输入框出现并聚焦
// 1. 获取到输入框
// 2. 输入框调用事件方法focus()达到聚焦行为
export default {data(){return {isShow: false}},methods: {async btn(){this.isShow = true;// this.$refs.myInp.focus()// 原因: data变化更新DOM是异步的// 输入框还没有挂载到真实DOM上// 解决:// this.$nextTick(() => {//     this.$refs.myInp.focus()// })// 扩展: await取代回调函数// $nextTick()原地返回Promise对象await this.$nextTick()this.$refs.myInp.focus()}}
}
</script>

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

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

相关文章

从零开始实现自己的串口调试助手(8)-循环发送

循环发送 准备 创建槽函数 设置QSpinBox的最大值 注意&#xff1a; // 我们不能在qt的ui线程中延时&#xff0c;否则将导致页面刷新问题 //QThread::msleep(ui->spinBox->text().toInt());//设置下次发送时间间隔 定时器实现 关联信号与槽: //添加自动换行定…

centos中sudo: apt: command not found

系统找不到apt这个命令。CentOS中应该使用sudo yum或sudo dnf&#xff08;CentOS 8及以后版本&#xff09;来执行包管理操作。不建议安装使用apt&#xff0c;可能会破坏系统的稳定性和兼容性。建议使用sudo yum install package_name来安装软件包。

Pycharm创建Conda虚拟环境时显示CondaHTTPErOT

原因&#xff1a;conda源出问题了&#xff0c;之前可以用&#xff0c;现在报错。 最好的解决方案&#xff1a;找到conda源&#xff0c;换源即可。 步骤&#xff1a; 1.修改 .condarc 文件&#xff08;文件的位置在&#xff1a;C:\Users\(你的用户名)\.condarc&#xff09;&a…

Python中的@staticmethod和@classmethod装饰器

名词解释 本文主要介绍静态方法staticmethod和类方法classmethod在类中的应用&#xff0c;在介绍这两个函数装饰器之前&#xff0c;先介绍类中的几个名词&#xff0c;便于后面的理解&#xff1a; 类对象&#xff1a;定义的类就是类对象 类属性&#xff1a;定义在__init__ 外…

type 相关的几个试验

1.概要 typeid是一个操作符&#xff0c;它用于在运行时获取关于数据类型的信息。 在C语言中&#xff0c;类型定义&#xff08;Type Definition&#xff09;通常是通过使用关键字如 typedef 来创建新的类型名称&#xff08;也称为类型别名&#xff09;&#xff0c;这些新的类型…

基于自动化工具autox.js的抢票(猫眼)

1.看到朋友圈抢周杰伦、林俊杰演唱会票贼难信息&#xff0c;特研究了一段时间&#xff0c;用autox.js写了自动化抢票脚本&#xff0c;购票页面自动点击下单&#xff08;仅限安卓手机&#xff09;。 2.脚本运行图 3.前期准备工作 &#xff08;1&#xff09;autox.js社区官网&am…

DNF手游攻略:主C职业推荐,云手机强力辅助!

在《地下城与勇士》手游中&#xff0c;你是否厌倦了重复刷图和无休止的手动操作&#xff1f;利用VMOS云手机&#xff0c;你可以一键解决这些烦恼&#xff0c;实现自动打怪、一机多开&#xff0c;让游戏变得更加轻松愉快。下面我们将介绍如何使用VMOS云手机&#xff0c;以及推荐…

卫生间装修10个避坑细节

雅静说卫生装修,记住这10条不后悔      卫生间装不好,漏水,臭,很麻烦      1先检查下水管,防止小黑虫和漏水      它里面必须要有皮垫密封圈,,看完以后把它拧紧      防止后期漏水还得砸瓷砖      2,改水电的时候留够插座,马桶一个      浴室柜的灯提前…

0109__strip(1) command

strip(1) command_linux strip-CSDN博客

MySQL-Explain使用

MySQL-Explain使用 type列 type列 这一列表示关联类型或访问类型&#xff0c;即MySQL决定如何查找表中的行&#xff0c;查找数据行记录的大概范围。 依次从最优到最差分别为&#xff1a;system > const > eq_ref > ref > range > index > ALL 一般来说&…

现代信号处理复习笔记(一)简答题

本文仅作为复习参考。 1、简述卡尔曼滤波和维纳滤波的关系。 在线性时不变系统和加性白噪声的情况下,卡尔曼滤波进入稳态值之后,等价于因果的维纳滤波。在一些情况下,卡尔曼滤波的状态更新方程和协方差更新方程与维纳滤波的滤波方程是一致的,因此可以将卡尔曼滤波看作是维…

Python入门!这些你都知道吗?

Python的基本介绍 Python是由荷兰人吉多范罗苏姆&#xff08;Guido van Rossum&#xff09;于1990年代初设计的一门编程语言&#xff0c;作为ABC语言的替代品。它提供了高效的高级数据结构&#xff0c;并且能简单有效地进行面向对象编程。Python的语法简洁、易读&#xff0c;并…

rk3568 norflash+pcei nvme 配置

文章目录 rk3568 norflashpcei nvme 配置1&#xff0c;添加parameter_nor.txt文件2 修改编译规则3 修改uboot4 修改BoardConfig.mk5 修改kernel pcei配置6 编译7 烧录 rk3568 norflashpcei nvme 配置 1&#xff0c;添加parameter_nor.txt文件 device/rockchip/rk356x/rk3568_…

查询数据库每张表的记录数和数据大小的方法(不含索引)

1、手残方法 自己写脚本&#xff0c;不会利用元数据表和只会简单sql的解决办法&#xff1a; # cat loop_db_tables.sh #!/bin/bashdbnamesmysql -uroot -ppassword -e "show databases;" for dbname in $dbnames do# 由于是借用了shell&#xff0c;所以需要处理输…

git commit rule

git commit rule feat: 新功能 fix: bug修复 docs: 仅文档更改 style: 不影响代码含义的更改&#xff08;空白、格式设置、缺失 分号等&#xff09; refactor: 既不修复bug也不添加特性的代码更改 perf: 改进性能的代码更改 test: 添加缺少的测试或更正现有测试 chore: 对构建…

【学习笔记】Windows GDI绘图(十三)动画播放ImageAnimator(可调速)

文章目录 前言定义方法CanAnimate 是否可动画显示Animate 动画显示多帧图像UpdateFramesStopAnimate终止动画Image.GetFrameCount 获取动画总帧数Image.GetPropertyItem(0x5100) 获取帧延迟 自定义GIF播放(可调速) 前言 在前一篇文章中用到ImageAnimator获取了GIF动画的一些属…

vue3 监听器,组合式API的watch用法

watch函数 在组合式 API 中&#xff0c;我们可以使用 watch 函数在每次响应式状态发生变化时触发回调函数 watch(ref,callback&#xff08;newValue,oldValue&#xff09;&#xff0c;option:{}) ref:被监听的响应式量&#xff0c;可以是一个 ref (包括计算属性)、一个响应式…

STM32—按键控制LED(定时器)

目录 1 、 电路构成及原理图 2 、编写实现代码 main.c exit.c 3、代码讲解 4、烧录到开发板调试、验证代码 5、检验效果 此笔记基于朗峰 STM32F103 系列全集成开发板的记录。 1 、 电路构成及原理图 EXTI&#xff08;External interrupt/event controller&#xff…

查询SQL02:寻找用户推荐人

问题描述 找出那些 没有被 id 2 的客户 推荐 的客户的姓名。 以 任意顺序 返回结果表。 结果格式如下所示。 题目分析&#xff1a; 这题主要是要看这null值会不会用&#xff0c;如果说Java玩多了&#xff0c;你去写SQL时就会有问题。在SQL中判断是不是null值用的是is null或…

泛微开发修炼之旅--10基于Ecology实现附件上传,并将上传后的文件id存入表单附件控件中的示例及源码

文章链接&#xff1a;泛微开发修炼之旅--10基于Ecology实现附件上传&#xff0c;并将上传后的文件id存入表单附件控件中的示例及源码