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. 针对C程序员的 C++

    C++是在C语言基础上添加面向对象扩展而成.C++在提供很多传统C语言没有的优点的同时也保持了与C语言的兼容性,这样人们就可以在一个程序中同时使用C和C++.在比赛当中,您必须使用一些基本的C++功能 ...

  2. 【Unity Shader】UnityCG.cginc中一些常用的函数

    // 摄像机方向(视角方向) float3 WorldSpaceViewDir(float4 v) // 根据模型空间中的顶点坐标 得到 (世界空间)从这个点到摄像机的观察方向 float3 Unit ...

  3. Java编程的逻辑 (48) - 剖析ArrayDeque

    本系列文章经补充和完善,已修订整理成书<Java编程的逻辑>,由机械工业出版社华章分社出版,于2018年1月上市热销,读者好评如潮!各大网店和书店有售,欢迎购买,京东自营链接:http:/ ...

  4. linux用户和权限详解

    1.用户组说明 在使用useradd命令创建用户的时侯可以用-g 和-G 指定用户所属组和附属组.基本组:如果没有指定用户组,创建用户的时候系统会默认同时创建一个和这个用户名同名的组,这个组就是基本组 ...

  5. oozie 安装过程详解

    1.从apache的官网下载oozie3.3.2 2.编译oozie,以下命令用root来执行吧,它不做任何的测试的,因为一测试就会出错的 官网估计也知道,所以顺便也提供了一个跳过参数的命令... b ...

  6. Hbase 学习(六) 配置文件调优

    这部分的内容,网上多了去了,都大同小异的,仅作为备忘录,省得需要的时候又要到处查. 1.zookeeper.session.timeout 默认3分钟,zookeeper和hbase通信的超时时间,设 ...

  7. 【linux】——一个小程序

    利用工作之余为小伙伴写了份作业,关于进程间通信的.题目如下: 父进程从键盘上接受1000个数据,对其求和sum1,子进程对这1000个数平方和sum2,结果传给父进程,父进程将sum1+sum2后,打 ...

  8. ELASTICSEARCH 中暂时移除一个节点

    ELASTICSEARCH 中暂时移除一个节点 版权声明 本站原创文章 由 萌叔 发表 转载请注明 萌叔 | http://vearne.cc 前言 在维护ES集群的过程中,我们会经常遇到将某个ES实 ...

  9. python 安装pycurl

    yum install libghc-gnutls-dev opnssl nss -y 126 yum install libghc-gnutls-dev -y 127 yum install htt ...

  10. VS2017安装PCL1.8.1

    很多使用在windows环境下编译和使用PCL,这样让我想试试,所以就迫不得已的放弃使用Ubuntu环境,但是我还是建议使用Ubuntu系统,毕竟在Ubuntu下几条命令就搞定了,为了迎合在windo ...