程序地带

vue中获取DOM,操作DOM(ref的基本用法)



ref的基本用法
refnextTick


ref
//如果想要获取到DOM对象或者组件对象,可以给对应的标签添加ref属性,并自定义名字
//这是子组件
<child ref="child"></child>
this.$refs.child//获取的是一个组件对象
//这是个普通的标签
<div ref="div"></div>
this.$refs.div //获取到的是一个DOM对象
ref最好结合 nextTick 使用
nextTick
//如果想要在vue中使用DOM对象,可以使用该方法
this.$nextTick(() => {
//这个函数会等待DOM执行完成后执行
})
this.$nextTick().then(() => {
//这个函数会等待DOM执行完成后执行
})

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_49770502/article/details/111246137

随机推荐

有趣的Redis:数据结构详解-dict

有趣的Redis:数据结构详解-dict

介绍在之前的文章中我们提到,Redis中的数据是放在一个字典中的。例如当我们执行如下命令后,redis的字典结构如下setbookNameredis;rpushfruits...

Java识堂 阅读(366)

Python读取excel中单元格内的图片

话不多说,直接上demofromopenpyxlimportload_workbookfromopenpyxl_image_loaderimportSheetImageLoader#定义需要处理的ex...

钢琴线与小刀 阅读(917)

一款高仿腾讯漫画的漫画阅读类 APP

一款高仿腾讯漫画的漫画阅读类 APP

早上好,骚年,我是小菜,我的公众号「菜鸟翻身」会推荐GitHub上有用的项目,一分钟get一个优秀的开源项目,挖掘开源的价值。我的...

菜鸟翻身 阅读(744)

记录three.js绘制变直径管道方式

由于项目需要绘制变直径的管道,但在three文档没有找到相关的绘制方式。最终能绘制出来也是费了一点功夫。话不多说先上效果图:叙述能力不足,上代码凑合看吧&#x...

冰菓ice 阅读(476)

Android-BottomNavigation的创建

Android-BottomNavigation的创建

BottomNavigation基本步骤新建一个项目选择三个矢量图(随意创建三个Fragment和相应的ViewModel创建一个Menu资源会生成一个文件夹和menu.xml文件修改menu.xml...

迷雾总会解 阅读(816)

1.学生党如何查找文献书籍

1.学生党如何查找文献书籍

学生党如何查找文献书籍文献检索Sciencedirect免费专利在线(FPO)Glgoo学术X-MOL平台谷粉学术国家科技图书文献中心数据库(NSTL)CiteseerxA...

Mr.Xukaige 阅读(399)