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 ...
随机推荐
- Virtual DOM 虚拟DOM的理解(转)
作者:戴嘉华 转载请注明出处并保留原文链接( #13 )和作者信息. 目录: 1 前言 2 对前端应用状态管理思考 3 Virtual DOM 算法 4 算法实现 4.1 步骤一:用JS对象模拟DOM ...
- 【Unity Shader】七、透明的Transparent Shader
学习资料: http://www.sikiedu.com/course/37/task/459/show# 本例的代码基于上一篇文章,添加透明效果.为了便于区分新增的部分,该部分使用和红色加粗字体. ...
- webpack8--删除dist目录,压缩分离后的CSS
一.删除dist目录 有时候我们需要在打包文件之前删除之前打包的dist目录,如何做? 1.安装new cleanWebpackPlugin(['dist']) npm install clean-w ...
- javascript小技巧[转]
总的来说,如果你要找js 的东西,而不看这两篇的话,肯定要多花好多时间!!哈哈!! 如果你找的javascript的东西的话,建议你 ctrl+F 直接在这个页上找,因为这里80%有你要找的,但是要 ...
- ssh : how to add "hostkey" to “know_hosts”
有时后端daemon或者脚本在执行ssh连接时,会遇到以下提示: The authenticity of host 'git.sws.com (10.42.1.88)' can't be establ ...
- Java相对路径/绝对路径总结
Version:0.9 StartHTML:-1 EndHTML:-1 StartFragment:00000099 EndFragment:00019826 Java相对路径/绝对路径总结(2) 修 ...
- android O 蓝牙设备默认名称更改
安卓系统会首先读取BTM_DEF_LOCAL_NAME的值,如果为空,就使用"ro.product.model"作为蓝牙设备名. system/bt/btif/src/btif_d ...
- JDBC更新数据实例
在本教程将演示如何在JDBC应用程序中,更新数据库的一个表中数据记录. 在执行以下示例之前,请确保您已经准备好以下操作: 具有数据库管理员权限,以在给定模式的数据库表中更新数据记录. 要执行以下示例, ...
- Sql:主表与子表的最新记录级联查询
SELECT * FROM MainTable mLEFT JOIN (SELECT d.* FROM (SELECT MAX(clc.Id) AS id FROM ChildTable AS clc ...
- unity-------------------打包BuildAssetBundles的使用
unity5打包机制下,一种资源打ab和资源管理的方案.1.打ab: 1.设置平台 2.清楚所有资源的assetbundlename: string[] abNameArr = AssetDataba ...