vue获取dom元素注意问题
mounted(){
setTimeout(()=>{
this.contentToggle();
},1000)
},
methods:{
contentToggle(){
console.log(this.$refs.bodyFont.offsetHeight);
}
}
vue想要获取dom元素的高,一般情况下我们都可以想到写在mounted函数里,即dom加载完再获取,但是结果并不如我们所想,又想到用一个
this.$nextTick(()=>{
//函数
})
来获取,发现根本没用啊/。。
所以好的办法就是用一个setTimeout定时器,时间可以设为0,但是有时候生效,有时候不生效,还是加一个小的时间值比较保险,这样就可以保证获取到的一定是dom加载后的了,该原理适用于vue中很多传值的问题,刚开始获取不到传过来的值,用一个setTimeout就可。
vue获取dom元素注意问题的更多相关文章
- vue获取dom元素内容
通过ref来获取dom元素 在vue官网上对ref的解释 ref 被用来给元素或子组件注册引用信息.引用信息将会注册在父组件的 $refs 对象上.如果在普通的 DOM 元素上使用,引用指向的就是 D ...
- vue获取dom元素高度的方法
获取高度: <div ref="自定义名称" > </div>要在钩子mounted里面dom结构生成后去获取dom的高度,宽度,修改样式等操作!!! mo ...
- Vue获取DOM元素的属性值
项目中需要做一个小弹层,如下图: 我需要知道点击元素距离顶部的值,再计算弹层的top值,如下图: 在vue中如何获取到DOM元素距离窗口顶部的值呢? 1.通过$event获取 html: <di ...
- vue获取DOM元素并设置属性
这里我想到了2个方法: 方法一: 直接给相应的元素加id,然后再document.getElementById("id");获取,然后设置相应属性或样式 方法二: 使用ref,给相 ...
- Vue获取dom元素
<li @click='获取li标签' :ref="center-li" id="center-li" > =====我是li标 ...
- Vue 获取DOM元素ref
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Vue获取DOM元素样式 && 样式更改
在 vue 中用 document 获取 dom 节点进行节点样式更改的时候有可能会出现 'style' is not definde的错误, 这时候可以在 mounted 里用 $refs 来获取样 ...
- Vue 获取dom元素之 ref 和 $refs 详解
一.$refs 一个对象,持有ref注册过的所有元素或子组件.(注册过的 ref 的集合) 二.ref 被用来给元素或子组件注册引用信息.若用在dom元素上,引用指向的就是dom元素:若用在子组件上, ...
- Vue 获取dom元素中的自定义属性值
方法一: HTML <div id="app"> <button @click="getData($event,'100')">点我&l ...
随机推荐
- plsql 安装后database下拉没有东西(转)
转载自:http://www.cnblogs.com/yaobolove/p/5682982.html 今天来说一下问题,就是装了plsql竟然在database这一栏没有东西,我也是纠结了很久,感觉 ...
- 安卓Activity生命周期(转)
http://www.oschina.net/question/54100_27841 启动:onCreate()->onStart()->onResume 当从Activity界面直接按 ...
- html页面布局总结篇
1. 使用float布局 注意点:使用浮动布局要注意清除浮动.使用伪类清除 浮动层:给元素的float属性赋值后,就是脱离文档流,进行左右浮动,紧贴着父元素(默认为body文本区域)的左右边框. 而此 ...
- Java多线程——sychronized
概述 关键字synchronized的作用是实现线程间的同步.它的工作是对同步的代码加锁,使得每一次,只能有一个线程进入同步块,从而保证线程间的安全性. 直接作用于实例方法(普通同步方法):对当前实例 ...
- 字符串过滤掉所有最邻近的“<”和“>”之间的字符
请编写一个方法,实现如下功能:请输入字符串过滤掉所有最邻近的“<”和“>”之间的字符,将其与字符返回. 例如:输入<html><body>4<5<123 ...
- CAS (12) —— CAS TicketRegistry使用JPA方案数据源c3p0与JNDI
CAS (12) -- CAS TicketRegistry使用JPA方案数据源c3p0与JNDI tomcat版本: tomcat-8.0.29 jdk版本: jdk1.8.0_65 cas版本: ...
- JTree常用方法
private JTree jtNetDevice;//数组件申明private JScrollPane jspTree;//滚动面板申明 1.初始化 DefaultMutableTreeNo ...
- python里面有人写while 循环用 用while 1 和while True的区别
由于Python2中,True/False不是关键字,因此我们可以对其进行任意的赋值,这就导致程序在每次循环时都需要对True/False的值进行检查:而对于1,则被程序进行了优化,而后不会再进行检查 ...
- git基本操作:上传代码
利用git将本地代码提交到远程服务器一般分为如下5个步骤: 一.查看当前文件的状态 使用git status命令可以查看有那些文件进行了修改,一般有下面几个状态: 1.Untracked: 未跟踪, ...
- Android学习之Intent使用
1.使用显示Intent Intent intent = new Intent(FirstActivity.this,SecondActivity.class); startActivity(inte ...