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. 【iCore4 双核心板_FPGA】例程三:计数器实验——计数器使用

    实验现象: 绿色led闪烁 核心源代码: //--------------------module_counter_ctrl--------------------// module counter_ ...

  2. asp.net gridview 如何实现行点击事件

    第一步:绑定行点击事件 protected void GV_DATA_RowDataBound( object sender, GridViewRowEventArgs e ) { if( e.Row ...

  3. jQuery 实现前端模糊匹配与首字母搜索

    实现效果 源码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <t ...

  4. ElasticSearch的安装、使用、踩坑

    最近博客写的少了. 本篇介绍在安装ElasticSearch和head插件的过程中遇到的小问题,和一些日常使用的操作(简单搜索语法.分片管理). ElasticSearch 它是一个实时分布式搜索和分 ...

  5. GODOT 3.0 开发进度汇报 #6

    经过了又一个月的开发工作,在此作进度报告.本月的工作可以划分为:完成Web导出工具开发.GDNative.以及新的粒子系统. Web Export Godot 现在有了一款实验性的导出工具,导出目标为 ...

  6. git——添加远程库

    添加远程库 阅读: 406682 现在的情景是,你已经在本地创建了一个Git仓库后,又想在GitHub创建一个Git仓库,并且让这两个仓库进行远程同步,这样,GitHub上的仓库既可以作为备份,又可以 ...

  7. Intellij Idea搭建Spark开发环境

    在Spark高速入门指南 – Spark安装与基础使用中介绍了Spark的安装与配置.在那里还介绍了使用spark-submit提交应用.只是不能使用vim来开发Spark应用.放着IDE的方便不用. ...

  8. Python 类的多继承

    #类的多继承 ''' 与c++不同,python的类经过优化,多继承时不会产生方法二义性 ''' #python中所有的类都是默认继承于object类 class A(object): def tes ...

  9. ASP.NET中使用jQuery插件实现图片幻灯效果

    参照网上的资料及提供的jQuery插件实现图片幻灯效果. 1.页面前台代码: //头部引用 <head runat="server"><title>< ...

  10. python with 语句妙用

    class aa(): def bb(self): print("hhhh") return "hello world" def __enter__(self) ...