vue获取dom元素注意问题
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元素注意问题的更多相关文章
- vue获取dom元素内容
通过ref来获取dom元素 在vue官网上对ref的解释 ref 被用来给元素或子组件注册引用信息.引用信息将会注册在父组件的 $refs 对象上.如果在普通的 DOM 元素上使用,引用指向的就是 D ...
- vue获取dom元素高度的方法
获取高度: <div ref="自定义名称" > </div>要在钩子mounted里面dom结构生成后去获取dom的高度,宽度,修改样式等操作!!! mo ...
- Vue获取DOM元素的属性值
项目中需要做一个小弹层,如下图: 我需要知道点击元素距离顶部的值,再计算弹层的top值,如下图: 在vue中如何获取到DOM元素距离窗口顶部的值呢? 1.通过$event获取 html: <di ...
- vue获取DOM元素并设置属性
这里我想到了2个方法: 方法一: 直接给相应的元素加id,然后再document.getElementById("id");获取,然后设置相应属性或样式 方法二: 使用ref,给相 ...
- Vue获取dom元素
<li @click='获取li标签' :ref="center-li" id="center-li" > =====我是li标 ...
- Vue 获取DOM元素ref
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Vue获取DOM元素样式 && 样式更改
在 vue 中用 document 获取 dom 节点进行节点样式更改的时候有可能会出现 'style' is not definde的错误, 这时候可以在 mounted 里用 $refs 来获取样 ...
- Vue 获取dom元素之 ref 和 $refs 详解
一.$refs 一个对象,持有ref注册过的所有元素或子组件.(注册过的 ref 的集合) 二.ref 被用来给元素或子组件注册引用信息.若用在dom元素上,引用指向的就是dom元素:若用在子组件上, ...
- Vue 获取dom元素中的自定义属性值
方法一: HTML <div id="app"> <button @click="getData($event,'100')">点我&l ...
随机推荐
- [转]SpringMVC单文件上传、多文件上传、文件列表显示、文件下载
一.新建一个Web工程,导入相关的包 springmvc的包+commons-fileupload.jar+connom-io.jar+commons-logging,jar+jstl.jar+sta ...
- [转]Spring MVC 教程,快速入门,深入分析
原文地址:http://elf8848.iteye.com/blog/875830 目录 一.前言 二.spring mvc 核心类与接口 三.spring mvc 核心流程图 四.spring mv ...
- Tomcat性能优化(三) Executor配置
http://hello-nick-xu.iteye.com/blog/2113853 http://blog.chinaunix.net/uid-12115233-id-3358004.html
- 【进阶修炼】——改善C#程序质量(2)
16, 元素可变的情况下应避免用数组. 数组是定长的集合,可以考虑用ArrayList或List<T>集合.ArrayList元素是object类型,有装箱的开销,性能较低.另外Array ...
- 在 Linux 下用 grep 时高亮显示匹配的部分
用 grep 匹配文件时,显示结果黑压压的一片执行一下这条命令,重新 grep 试试看export GREP_OPTIONS='--color=auto'好看多了,不是吗?你可以把 export GR ...
- PCL滤波介绍(1)
在获取点云数据时 ,由于设备精度,操作者经验环境因素带来的影响,以及电磁波的衍射特性,被测物体表面性质变化和数据拼接配准操作过程的影响,点云数据中讲不可避免的出现一些噪声.在点云处理流程中滤波处理作为 ...
- WaitForSingleObject函数的使用
等待函数可使线程自愿进入等待状态,直到一个特定的内核对象变为已通知状态为止. WaitForSingleObject 函数 DWORD WaitForSingleObject( HANDLE hOb ...
- CentOS 7系统LAMP配置PHP-FPM的示例
CentOS 7 系统出来有一段时间了,今天我们来看在vps中的 CentOS 7 中给lamp环境配置php-fpm的过程,希望文章可以帮助到各位. CentOS 7 已经发布,并且采用 Apach ...
- 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 ...
- 我最喜欢的jQuery插件模板
我使用jQuery已经有相当长的时间了,并且我会常常为它写一些插件(plugin).我尝试过用不同的方式去写,现在这个模板是我最喜欢的: 1 2 3 4 5 6 7 8 9 10 11 12 13 1 ...