看到这个问题我第一时间想的竟然是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. VMware12 安装 Mac OS 10.12 步骤及设置优化教程

    最近公司要开发苹果的ARKit应用,但是项目组穷啊,只有美工用着一台苹果本本,所以肯定不能老用他的电脑,效率低还老打扰他.所以我就想着用虚拟机整,毕竟玩了N年的虚拟机了,应该是没啥问题的.所以就开始各 ...

  2. hive 表新增字段后更新分区无法显示数据

    解决方案: 1.删除分区后重新跑数据 alter table drop partition(分区字段=“”): 2.新增字段运行程序后其实数据已经有了,只是查询hive的时候无法显示出来, 这个时候只 ...

  3. NLTK——常用函数

    1.Functions Defined for NLTK's Frequency Distributions Example Description fdist = FreqDist(samples) ...

  4. 通过nginx日志，统计最近两天的交易笔数

    #!/bin/bash yesterday=`date -d last-day +%Y-%m-%d` dayago=`date -d '2 days ago' +%Y-%m-%d` #echo $ye ...

  5. python3 lcs 最大公共子序列

    抛出问题: 假定字符串 s1 = 'BDCABA', s2 = 'ABCBDAB',求s1和s2的最大公共子序列. 问题分析: 我们想要求出s1和s2的最大公共子序列,我们可以用c(i,j)表示s1( ...

  6. JVM运行、类加载的全过程

    类加载机制:JVM把CLASS文件加载到内存,并对数据进行校验.解析和初始化,最终形成JVM可以直接使用的Java文件. 加载:把class文件字节码加载到内存中,并且将这些静态数据转换成方法区中的运 ...

  7. UGUI 5.0 一些笔记

    1.加载资源路径 在Assets路径里创建Resources文件夹 a.加载配置好的界面 GameObject obj = (GameObject)Resources.Load ("conf ...

  8. MTK6261初始化待机流程

  9. drf框架之分页器的用法

    1. 分页器分为:简单分页器与偏移分页器和加密分页器 2.实现一个简单的分页器的用法: # 简单分页 # 第一步,导入分页类 # from rest_framework.pagination impo ...

  10. Mysql千万级大表优化

    Mysql的单张表的最大数据存储量尚没有定论,一般情况下mysql单表记录超过千万以后性能会变得很差.因此,总结一些相关的Mysql千万级大表的优化策略. 1.优化sql以及索引 1.1优化sql 1 ...