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 ...
随机推荐
- 2017 年 机器学习之数据挖据、数据分析,可视化,ML,DL,NLP等知识记录和总结
今天是2017年12月30日,2017年的年尾,2018年马上就要到了,回顾2017过的确实很快,不知不觉就到年末了,再次开篇对2016.2017年的学习数据挖掘,机器学习方面的知识做一个总结,对自己 ...
- 用B表更新A表
UPDATE dbo.POR_LOT SET POR_LOT.SHIPPED_FLAG =B.SHIPPED_FLAGFROM POR_LOT A INNER JOIN ( SELECT T5.LOT ...
- AJAX 简单例程示例
index.html <html> <head> <script> function showHint(str) { if (str.length==0) { re ...
- redis关闭/重启服务器
通过docker实现: 一.创建redis服务器与客户端 docker run -p : -d --name redis-server docker.io/redis: redis-server -- ...
- sam9260 adc 头文件
/* * driver/char/at91_adc.h * * Copyright (C) 2007 Embedall Technology Co., Ltd. * * Analog-to-digit ...
- WCF数据交互时长度超过8192
wcf项目里面,客户端的某个函数执行时可能需要上传13000个字符到服务器. 按照常规的接口+客户端调用写好代码之后,出现了这么个错误: 网上查了很多资料,没有能够一步到位解决问题的.花了2个小时,总 ...
- openvpn之server配置篇
openvpn server的配置路径下有大约如下文件: [root@localhost server]# ll total -rw-r-----. nobody nobody Sep ca.crt ...
- Git 提交更改
Jerry 已经提交的更改,他想纠正他的最后一次提交,在这种情况下,git 的修改将帮助操作.最后提交修改操作的变化,包括提交信息,它创建新的提交ID. 修改操作之前,他会检查提交日志. [jerry ...
- 【C】——dup/dup2用法
相信大部分在Unix/Linux下编程的程序员手头上都有<Unix环境高级编程>(APUE)这本超级经典巨著.作者在该书中讲解dup/dup2之前曾经讲过“文件共享”,这对理解dup/du ...
- 读取 classes下的配置文件
调用: Configure.getValue("discount.strategy.class"); 配置类: package com.util; import com.sun.j ...