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. eclipse Maven项目Context root 为空,不能修改

    从SVN下载项目的时候,遇到过这种问题,导入下来的项目没有Context root 的名字,导致报错. 看了网上的解决办法,不行,于是研究了下,得出了解决办法,这里来记录一下. 先将Maven项目下载 ...

  2. [转]cron表达式详解

    原文地址:https://www.cnblogs.com/linjiqin/archive/2013/07/08/3178452.html Cron表达式是一个字符串,字符串以5或6个空格隔开,分为6 ...

  3. C语言 · 01背包

    最近老碰到DP问题,没整过,在网上有不少资料,转载此篇自:http://blog.csdn.net/libin56842/article/details/9338841 有N件物品和一个容量为V的背包 ...

  4. [转]uboot中SPI Flash Booting配置

    转自:https://e2echina.ti.com/question_answer/dsp_arm/sitara_arm/f/25/t/124834 最近和人一起调试SPI FLASH的配置问题,做 ...

  5. MVC源码学习之AuthorizeAttribute

    常见的Controller定义方式: public class HomeController : Controller { public ActionResult Index() { return V ...

  6. Android训练课程(Android Training) - NFC基础

    NFC 基础 本文档介绍了在Android上的基本的NFC任务.它说明了如何发送和接收的NDEF消息(NDEF messages)的形式的表单里包含的NFC数据(NFC data),并介绍Androi ...

  7. 【oneday_onepage】——Ten Changes To Make A Difference In Your Life

    When you want to change something in your life, it can feel overwhelming. Whether it’s losing 50lbs ...

  8. ansible wc -l 对结果值取大小的操作

    [root@localhost ansible]# cat zss.yml - hosts: zss tasks: - name: step1 ping: - name: step2 install ...

  9. 微信小程序——template的循环嵌套

    上一篇我们有写到 template的使用方法 .在实际运用中,需要做到template里面再嵌套一层循环.我们先看一下数据结构: 模板是用于循环list,现在的需求是在模板里面嵌套一个orderIte ...

  10. node学习笔记3——文件操作fs

    文件操作关键字: http('fs') ——  请求 node 里面的 http 模块 readFile ——  读文件,参数包括 文件名,回调函数 writeFile ——  写文件,参数包括 文件 ...