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. [转]SpringMVC单文件上传、多文件上传、文件列表显示、文件下载

    一.新建一个Web工程,导入相关的包 springmvc的包+commons-fileupload.jar+connom-io.jar+commons-logging,jar+jstl.jar+sta ...

  2. [转]Spring MVC 教程,快速入门,深入分析

    原文地址:http://elf8848.iteye.com/blog/875830 目录 一.前言 二.spring mvc 核心类与接口 三.spring mvc 核心流程图 四.spring mv ...

  3. Tomcat性能优化(三) Executor配置

    http://hello-nick-xu.iteye.com/blog/2113853 http://blog.chinaunix.net/uid-12115233-id-3358004.html

  4. 【进阶修炼】——改善C#程序质量(2)

    16, 元素可变的情况下应避免用数组. 数组是定长的集合,可以考虑用ArrayList或List<T>集合.ArrayList元素是object类型,有装箱的开销,性能较低.另外Array ...

  5. 在 Linux 下用 grep 时高亮显示匹配的部分

    用 grep 匹配文件时,显示结果黑压压的一片执行一下这条命令,重新 grep 试试看export GREP_OPTIONS='--color=auto'好看多了,不是吗?你可以把 export GR ...

  6. PCL滤波介绍(1)

    在获取点云数据时 ,由于设备精度,操作者经验环境因素带来的影响,以及电磁波的衍射特性,被测物体表面性质变化和数据拼接配准操作过程的影响,点云数据中讲不可避免的出现一些噪声.在点云处理流程中滤波处理作为 ...

  7. WaitForSingleObject函数的使用

    等待函数可使线程自愿进入等待状态,直到一个特定的内核对象变为已通知状态为止.  WaitForSingleObject 函数 DWORD WaitForSingleObject( HANDLE hOb ...

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

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

  9. j解决sparkr中使用某些r的原生函数 发生错误Error: class(objId) == "jobj" is not TRUE的问题

    Create table function in Spark in R not working João_Andre  (3) 询问的问题 | 2016年12月10日 06:03BLUEMIXRSPA ...

  10. 我最喜欢的jQuery插件模板

    我使用jQuery已经有相当长的时间了,并且我会常常为它写一些插件(plugin).我尝试过用不同的方式去写,现在这个模板是我最喜欢的: 1 2 3 4 5 6 7 8 9 10 11 12 13 1 ...