看到这个问题我第一时间想的竟然是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. MySQL实现分组取组内特定数据的功能

    需求:在MySQL5.7环境下,查询下面表中,各个学科前两名的学生的成绩: 1.准备数据 窗机表以及向表中插入数据 创建一张表: DROP TABLE IF EXISTS `grade`; CREAT ...

  2. Android 开发 存储目录的详解

    简介 Android设备,有3个地方的文件存储位置,他们分别是: 内部存储空间(用户无法浏览到此目录) 外部存储空间(就是手机自身的文件管理目录,用户可以浏览) SD卡的存储空间(需要插入T卡) Sh ...

  3. eclipse使用报错集锦

    问题1.Eclipse启动时总是提示“subversive connector discovery”解决方案 解答1:在eclipse_workSpace(工作空间下)\.metadata\.plug ...

  4. DNS的功能-域名空间、域名注册和域名解析

    DNS的主要功能包括以下三个: 域名空间:定义一个包括所有可能出现的主机名字的域名空间. 域名注册:保证每台主机域名的唯一性. 域名解析:提供一种有效的域名与IP地址转换机制. DNS域名空间 (1) ...

  5. SpringBoot学习笔记1

    1.什么是SpringBoot 用一些固定的方式来构建生产级别的spring应用.spring boot推崇约定大于配置的方式便于你能够快速的启动并运行程序. 2.为什么要学spring boot j ...

  6. anaconda安装Opencv报错:Could NOT find PythonLibs: Found unsuitable version "2.7.6",

    机器上装了两个python,一个是默认的,一个是anaconda.安装opencv时就报错了: -- Found PythonInterp: /home/deeplp/anaconda2/bin/py ...

  7. 关于web前端base64转换为Blob,存入数组后 ajax请求传输到后端 接受不到文件问题

    前端console输出是正常Blob对象,通过ajax formdata 传输到 后端java SpringMvc用MultipartFile接受却一直接受不到,后来直接解析HttpServletRe ...

  8. 限时订单实现方案(DelayQueue、ActiveMq)

    原文链接:http://www.studyshare.cn/blog-front/blog/details/1132 一.在各种电商网站下订单后会保留一个时间段,时间段内未支付则自动将订单状态设置为已 ...

  9. Zabbix客户端日志出现(Not all processes could be identified, 解决

    场景:因为使用了netstat -p参数. 权限问题,zabbix_agentd是zabbix用户启动的,默认不能执行netstat -p等命令,导致从服务器取到的自动发现脚本为空 (Not all ...

  10. Android 添加第三方jar包

    1,拷贝jar包到项目的\app\libs文件夹下. 2,打开项目下的build.gradle(Module:app)文件,在“dependencies {}”中添加“compile files('l ...