Vue获取dom元素节点并操作元素的样式（$el的用法以及uni-app中操作元素样式）

在vue中操作dom元素节点的样式有好几种方式这里我总结了两种

第一种：

1.获取到元素节点(这里通过this.$refs获取元素节点)

this.$refs.xxxxx.$el

2.操作元素的样式

this.$refs.num1Underline.$el.style.transform = 'scaleX(1)';

• 这种方法需要注意的是$el 用于获取vue挂载的实例的dom对象，如果不添加$el则获取不到style的属性值，会打印 TypeError: Cannot read property 'style' of undefined 错误，这个错误大家一定都很熟悉，是类型错误，没有访问到dom元素

第二种：

1.获取到元素的节点

document.querySelector('xxxx')

2.操作元素的样式

document.querySelector('xxxx').style.transform = 'scaleX(1)';

最后：

以上两种方式在uni app 框架中app端是不生效的，具体原因我最近也在慢慢的学习中，如果想在uni app操作dom元素的样式的话，建议使用三目运算符 :class="showActive == 1?activeClass :''"