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 ...
随机推荐
- centosmini7安装GNOME
1.在命令行下输入下面的命令来安装 Gnome 包 #:$sudo yum groupinstall "GNOME Desktop" "Graphical Admini ...
- Virtools元素、类和面向对象设计
无意中发现了在某个不存在的网站( https://sites.google.com )上,还存有09年写的一些半成品教材,下面这篇文章就是其中一部分. 概述 Virtools将元素(Element)组 ...
- netty tcp拆包
private List<byte[]> getCompletePacket(byte[] bytes, ByteBuf byteBuf) { byte[] clone = bytes.c ...
- if 语句练习 身高体重问题
public class d { /** * @param args */ public static void main(String[] args) { // TODO 自动生成的方法存根 int ...
- python list数据写入文件
看代码 def writeLmk(self,fileName,landmarks): fp = open(fileName,'w+') fp.write( "version: 1" ...
- Java 将图片转二进制再将二进制转成图片
import java.awt.image.BufferedImage; import java.io.ByteArrayInputStream; import java.io.ByteArrayOu ...
- 为什么c++中,有时可以用类名直接访问非静态成员函数?
正规的C++语言标准目前(截止到C++14)应该还不支持这种调用方法.目前微软似乎在它的VC++中推行一种叫做C++/CLI的标准,有可能会支持这种调用,如果一定要用这种调用方法的话,还应该用VS20 ...
- Java HashSet和HashMap源码剖析
转自: Java HashSet和HashMap源码剖析 总体介绍 之所以把HashSet和HashMap放在一起讲解,是因为二者在Java里有着相同的实现,前者仅仅是对后者做了一层包装,也就是说Ha ...
- USB2.0学习笔记连载(五):EZ-USB重要寄存器的配置
本篇博客主要讲解EZ-USB一些重要寄存器的配置,首先对于本篇博客所讲的内容,读者应该到官网上去下载相关的手册,其中包括<EZ-USB Technical Reference Manual> ...
- mysql insert exists || mysql 判断数据是否存在
情景如下: "今日前端忽然说句, 我需要做个判断, 不能重复收藏, 我犹如颈有寒冰不寒而栗, 于是思考我该怎么做?为什么她都思考到了我没有思考到这是我的工作啊" 思考后得到三种解决 ...