HBuilderX中使用Vue的$refs获取和设置样式详解

项目场景:

原来都是用的原生js直接修改dom来改变样式,今天看资讯中了解到在使用vue的过程中尽量避免使用原生js,因为原生js直接操作dom会造成过多的开销,应使用vue中的$refs操作虚拟dom来改变样式。废话不多说,直接上问题。


问题描述:

上面说到使用$refs来操作虚拟dom(这里提醒一下,refs后跟的属性值是标签中ref属性中的值),但是怎么操作呢?api是什么呢?完全没有头绪,博主就去面向百度编程了,结果,情况很不理想,大家的答案五花八门,且没有一个统一解决问题的办法。这里引入博主的简单示例和网上百度来的方法以及它们出现的错误。
以一个简单的view标签示例(这里不是微信开发工具,是HBuilderX,一款解决多端泛滥的神器,其语法结构是微信小程序和Vue),目的是点击后获取该标签的高度,以及改变它的高度。

在这里插入图片描述

这是网上百度到的一个据称是获取this.$refs,button,style.height的方法
点击该标签元素后,前端报错页面展示图如下: 在这里插入图片描述

在这里插入图片描述
意思是不能找到该标签下的height属性,且这种类似的答案在网上不只一个,至于其他答案的报错就不一一列举了。下面主要讲一下怎么解决这种问题。


原因分析:

刚刚分析到该标签下没有这种height这个属性,那么,又该怎么去获取和修改该标签高度呢?既然网上没有答案,那么我们就从该标签的返回值来分析一下,看下怎么获取和修改高度。
这里打印一下用$refs获取到view标签的所有属性。

console.log(this.$refs.button)

可以看到里面的属性如下:
在这里插入图片描述
博主把所有的属性都看了一遍,这里节约时间,直接给大家点开$el看一下:
在这里插入图片描述

这里可以看到view标签的高度找到了,也就是$el下的clientHeight属性,那么我们想要修改高度的话是不是直接修改这个值就可以了,我这里试了一下:

this.$refs.button.$el.clientHeight="40px"

发现了如下报错:
在这里插入图片描述
说明该属性只可读,不能够改写,那怎么办?难道不能通过js修改标签的高度吗?当然可以修改,vue能如此盛行,自然是有这些基础功能的,这里我们继续观察,可以发现$el下还有一个属性叫style,这和样式的单词也刚好符合,那会不会就是修改它呢?这里我试了一下:

this.$refs.button.$el.style.height="40px"

可以看到,在点击该标签,也就是说在执行该代码前,$el下的style中的cssText为空字符
在这里插入图片描述
当点击之后,发现cssText为:
在这里插入图片描述
即我们刚刚修改的height写入到了cssText中,修改成功。


解决方案:

最后,在这里总结一下:
对于获取标签的高度属性:

this.$refs.button.$el.clientHeight

修改标签的高度属性:

this.$refs.button.$el.style.height="40px"

当然,具体问题具体分析,比如现在要修改id或者className,就需要去重新去找这个属性值和修改的方法。
这篇文章除了提供这类问题的解决方法,还有就是提供一种探索问题的精神,在哪里出错,就深入到内部去寻找产生错误的原因。

  • 4
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值