看到这个问题我第一时间想的竟然是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. Python Excel 多sheet 多条数据 自定义写入

    pip install xlwt python excel 数据写入操作,处理网站数据导出以及不是太多数据的爬虫存储, 用处蛮多的轮子. (150+++++++++++++++++++++++++++ ...

  2. [python,2018-06-25] 高德纳箭号表示法

    概念 高德纳箭号表示法是种用来表示很大的整数的方法,由高德纳于1976年设计.它的意念来自幂是重复的乘法,乘法是重复的加法. 定义 计算 一个箭头 2↑3=2×2×2=8 2↑4=2×2×2×2=16 ...

  3. 214. Spring Security:概述

    前言 在之前介绍过了Shiro之后,有好多粉丝问SpringSecurity在Spring Boot中怎么集成.这个系列我们就和大家分享下有关这方面的知识. 本节大纲 一.什么是SpringSecur ...

  4. Android开发 ViewConfiguration 用法

    ViewConfiguration 实例获取 ViewConfiguration viewConfiguration = ViewConfiguration.get(Context); 常用对象方法 ...

  5. python-Djando项目搭建

    1.创建一个项目目录“C:\python项目\project2”. 2.打开CMD 进入该项目目录 cd C:\python项目\project2 3.执行 django-admin startpro ...

  6. Java的注解总结

    java 1.5开始引入了注解和反射,正确的来说注解是反射的一部分,没有反射,注解无法正常使用,但离开注解,反射依旧可以使用.Java的注解详解和自定义注解: https://blog.csdn.ne ...

  7. JEECG 3.7.8 新版表单校验提示风格使用&升级方法(validform 新风格漂亮,布局简单)

    JEECG 表单校验采用的是validform,默认的校验提示需要占用页面布局,提示效果较传统.jeecg这个自定义的校验提示风格,不占用页面布局,提示效果也更美观,简单易用,让表单看起来更漂亮!!! ...

  8. JAVA的第二次作业

    1.编写“人”类及其测试类.1.1 “人”类: 类名:Person 属性:姓名.性别.年龄.身份证号码 方法:在控制台输出各个信息1.2 测试类 类名:TestPerson 方法:main ...

  9. delphi:Exception EInvalidPointer in module Project1.exe

    在用delphi XE5编程时遇到如下问题: Exception EInvalidPointer in module Project1.exe at 00007595. Invalid pointer ...

  10. Python学习日记 --day4

    list列表: # # 列表 ''' # 增 # li = [1,'qwer','小明',[1,2,'qwe']] # print(li[0],type(li)) # 跟字符串的操作方法是一样的,返回 ...