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. 基于animation.css实现动画旋转特效

    分享一款基于animation.css实现动画旋转特效.这是一款基于CSS3实现的酷炫的动画旋转特效代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class ...

  2. Mongodb 的常用方法,在可视化工具执行

    查询: db.getCollection('message').find({"userId":"31257"}) 查询总数: db.getCollection( ...

  3. Android 下拉刷新上啦加载SmartRefreshLayout + RecyclerView

    在弄android刷新的时候,可算是耗费了一番功夫,最后发觉有现成的控件,并且非常好用,这里记录一下. 原文是 https://blog.csdn.net/huangxin112/article/de ...

  4. Ubuntu 12.04 LTS(64 bit) + RTL8188CU无线网卡驱动

    . . . . . 之前家里台式机上安装的是win7+CentOS双系统,但是CentOs的无线网卡驱动不知为何无论如何都安装不上,再加上这段时间一直很忙,所以一直使用着win.这几天事情忙得差不多了 ...

  5. 图解在VC里使用graphics.h画图(相似TC)

    1 www.easyx.cn 下载 EasyX 库 我下的2014;解压后例如以下图: 2 依据自己的VC 版本号进行安装 3 在控制台画一个圆 #include <graphics.h> ...

  6. centos7安装elasticsearch5.2.2

    这篇文章比较初级,介绍的是centos7下elasticsearch的安装. 主要阅读对象是初级运维.初级大数据工程师.java工程师.想了解es的.net工程师以及所有感兴趣的朋友. 文章的目的是为 ...

  7. mysql innodb_buffer_pool_size mysql占用内存大小和主从复制并行线程数量

    innodb_buffer_pool_size   set global slave_parallel_workers=4;

  8. ASP.NET Core 2.0使用Log4net实现记录日志功能

    一.安装Log4net 1.使用Nuget包进行安装 在依赖项上面右键,选择“管理NuGet程序包”,如下图所示: 在浏览界面输入log4net,然后点击安装,如下图所示: 2.使用程序包管理器控制台 ...

  9. java Calendar

    nowDate.add(Calendar.DAY_OF_MONTH,1); 谁能告诉我这里面的 1 是什么意思 2016年07月20日 13:59:47 javaPie 阅读数:2012   nowD ...

  10. CentOS 7系统LAMP配置PHP-FPM的示例

    CentOS 7 系统出来有一段时间了,今天我们来看在vps中的 CentOS 7 中给lamp环境配置php-fpm的过程,希望文章可以帮助到各位. CentOS 7 已经发布,并且采用 Apach ...