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元素注意问题的更多相关文章

  1. vue获取dom元素内容

    通过ref来获取dom元素 在vue官网上对ref的解释 ref 被用来给元素或子组件注册引用信息.引用信息将会注册在父组件的 $refs 对象上.如果在普通的 DOM 元素上使用,引用指向的就是 D ...

  2. vue获取dom元素高度的方法

    获取高度: <div ref="自定义名称" > </div>要在钩子mounted里面dom结构生成后去获取dom的高度,宽度,修改样式等操作!!! mo ...

  3. Vue获取DOM元素的属性值

    项目中需要做一个小弹层,如下图: 我需要知道点击元素距离顶部的值,再计算弹层的top值,如下图: 在vue中如何获取到DOM元素距离窗口顶部的值呢? 1.通过$event获取 html: <di ...

  4. vue获取DOM元素并设置属性

    这里我想到了2个方法: 方法一: 直接给相应的元素加id,然后再document.getElementById("id");获取,然后设置相应属性或样式 方法二: 使用ref,给相 ...

  5. Vue获取dom元素

     <li  @click='获取li标签'    :ref="center-li" id="center-li"      > =====我是li标 ...

  6. Vue 获取DOM元素ref

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. Vue获取DOM元素样式 && 样式更改

    在 vue 中用 document 获取 dom 节点进行节点样式更改的时候有可能会出现 'style' is not definde的错误, 这时候可以在 mounted 里用 $refs 来获取样 ...

  8. Vue 获取dom元素之 ref 和 $refs 详解

    一.$refs 一个对象,持有ref注册过的所有元素或子组件.(注册过的 ref 的集合) 二.ref 被用来给元素或子组件注册引用信息.若用在dom元素上,引用指向的就是dom元素:若用在子组件上, ...

  9. Vue 获取dom元素中的自定义属性值

    方法一: HTML <div id="app"> <button @click="getData($event,'100')">点我&l ...

随机推荐

  1. plsql 安装后database下拉没有东西(转)

    转载自:http://www.cnblogs.com/yaobolove/p/5682982.html 今天来说一下问题,就是装了plsql竟然在database这一栏没有东西,我也是纠结了很久,感觉 ...

  2. 安卓Activity生命周期(转)

    http://www.oschina.net/question/54100_27841 启动:onCreate()->onStart()->onResume 当从Activity界面直接按 ...

  3. html页面布局总结篇

    1. 使用float布局 注意点:使用浮动布局要注意清除浮动.使用伪类清除 浮动层:给元素的float属性赋值后,就是脱离文档流,进行左右浮动,紧贴着父元素(默认为body文本区域)的左右边框. 而此 ...

  4. Java多线程——sychronized

    概述 关键字synchronized的作用是实现线程间的同步.它的工作是对同步的代码加锁,使得每一次,只能有一个线程进入同步块,从而保证线程间的安全性. 直接作用于实例方法(普通同步方法):对当前实例 ...

  5. 字符串过滤掉所有最邻近的“<”和“>”之间的字符

    请编写一个方法,实现如下功能:请输入字符串过滤掉所有最邻近的“<”和“>”之间的字符,将其与字符返回. 例如:输入<html><body>4<5<123 ...

  6. 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版本: ...

  7. JTree常用方法

    private JTree jtNetDevice;//数组件申明private JScrollPane jspTree;//滚动面板申明 1.初始化     DefaultMutableTreeNo ...

  8. python里面有人写while 循环用 用while 1 和while True的区别

    由于Python2中,True/False不是关键字,因此我们可以对其进行任意的赋值,这就导致程序在每次循环时都需要对True/False的值进行检查:而对于1,则被程序进行了优化,而后不会再进行检查 ...

  9. git基本操作:上传代码

    利用git将本地代码提交到远程服务器一般分为如下5个步骤: 一.查看当前文件的状态 使用git status命令可以查看有那些文件进行了修改,一般有下面几个状态: 1.Untracked: 未跟踪, ...

  10. Android学习之Intent使用

    1.使用显示Intent Intent intent = new Intent(FirstActivity.this,SecondActivity.class); startActivity(inte ...