看到这个问题我第一时间想的竟然是JS

不知道你是怎么想的

不过昨天有一个小哥哥 问我一个Vue的 哈哈哈 get了

我当时问他为什么不用JS获取 他说 这个性能更高

那我们来看看这个高性能的获取元素高度的宝贝

辣就是利用vue的ref属性

听说这个性能很高……emmmm

然后把它打印出来 自己找自己想要的吧

//获取高度值

var h= this.$refs.test.offsetHeight; 

//获取元素样式值,element 为元素ref="element"

var heightCss = window.getComputedStyle(this.$refs.test).height; 

//获取元素内联样式值

var heightStyle =this.$refs.test.style.height; // 这里面会找到你要的所有的样式属性值

If you like me, please give me a lot of praise ^ v ^  

Thank you very much! mua~

Vue 获取元素样式 元素高度的更多相关文章

  1. vue获取dom元素高度的方法

    获取高度: <div ref="自定义名称" > </div>要在钩子mounted里面dom结构生成后去获取dom的高度,宽度,修改样式等操作!!! mo ...

  2. vue 获取元素高度

    1.html <div ref="getheight"></div> <br><br> 2.JavaScript // 获取高度值 ...

  3. jquery获取和设置元素高度宽度

    jquery获取和设置元素高度宽度 1.height()/ width() 取得第一个匹配元素当前计算的高度/宽度值(px) height(val)/ width(val) 为每个匹配的元素设置CSS ...

  4. js获取元素的滚动高度，和距离顶部的高度

    jq: 获取浏览器显示区域(可视区域)的高度 : $(window).height(); 获取浏览器显示区域(可视区域)的宽度 : $(window).width(); 获取页面的文档高度 $(doc ...

  5. vue获取DOM元素并设置属性

    这里我想到了2个方法: 方法一: 直接给相应的元素加id,然后再document.getElementById("id");获取,然后设置相应属性或样式 方法二: 使用ref,给相 ...

  6. jquery获取元素与屏幕高度距离

    a. onscroll事件 scroll是css样式中overflow的一个值,意思是显示滚动条;当一个元素的实际高度超过他的最大高度是,只要设置了overflow为scroll b. $(..).s ...

  7. jq 获取各个元素的宽度高度的方法

    JS获取各种宽度.高度的简单介绍: scrollHeight: 获取对象的滚动高度. scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 scrollTop:设置或获 ...

  8. js学习进阶-元素获取及样式设置

    var imgs = document.querySelectorAll("article img"); 获得article元素的直接或间接子孙的所有img元素, <arti ...

  9. js学习笔记7----return，arguments及获取元素样式

    1.return:返回值 1)函数名+括号:fn() ===> return; 2) 所有函数默认返回值:undefind; 3) return后面所有的代码都不会执行; 2.arguments ...

随机推荐

  1. struct 对齐和补齐原则

    // 对齐原则:每一成员需对齐为后一成员类型的倍数 // 补齐原则:最终大小补齐为成员类型最大值的倍数 struct A {  int a;     // 4  short b;   // (4) + ...

  2. java工具类——java将一串数据按照gzip方式压缩和解压缩

    我要整理在工作中用到的工具类分享出来,也方便自己以后查阅使用,这些工具类都是我自己实际工作中使用的 import java.io.ByteArrayInputStream; import java.i ...

  3. mysql 多实例安装

    mysql的四种启动方式: 1.mysqld启动mysql服务器:./mysqld --defaults-file=/etc/my.cnf --user=root客户端连接:mysql --defau ...

  4. 走进HashMap

    1.手写实现HashMap 2.解析代码并阐述HashMap1.7到1.8的变化 3.HashMap的遍历方式 4.HashMap与HashSet,Hashtable,ConcurrentHashMa ...

  5. Gradle史上最详细解析

    转自:https://www.cnblogs.com/wxishang1991/p/5532006.html 郑重申明本文转自邓凡平老师的 http://www.infoq.com/cn/articl ...

  6. 稀疏矩阵 part 3

    ▶ 各种稀疏矩阵数据结构下 y(n,1) = A(n,m) * x(m,1) 的实现,CPU版本 ● MAT 乘法 int dotCPU(const MAT *a, const MAT *x, MAT ...

  7. SpringBoot 配置Redis

    application.properties 文件内容 #Redis数据库索引(默认为0) spring.redis.database=0 #Redis服务器地址 spring.redis.host= ...

  8. 阿里云安装mysql后查看不到初始密码的解决办法

    在阿里云安装mysql后用grep 'A temporary password' /var/log/mysqld.log命令查看MySQL初始密码,毛线都没有看到,然后直接到/var/log/mysq ...

  9. 学习python 检测字符串的方法

    检测字符串长度的方法:len() 检测字符串是否含有字母的方法:str.isalpha() 检测字符串是否含有数字的方法:str.isnumeric() 检测字符串是否有大写字母:str.upper( ...

  10. Golang源码探索(三) GC的实现原理（转）

    Golang从1.5开始引入了三色GC, 经过多次改进, 当前的1.9版本的GC停顿时间已经可以做到极短.停顿时间的减少意味着"最大响应时间"的缩短, 这也让go更适合编写网络服务 ...