Vue获取dom元素节点并操作元素的样式($el的用法以及uni-app中操作元素样式) 落日映苍穹つ 2022-12-31 08:25 629阅读 0赞 ![在这里插入图片描述][20201229112042960.png] 在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)'; 最后: ![在这里插入图片描述][20201229113152351.png] 以上两种方式在uni app 框架中app端是不生效的,具体原因我最近也在慢慢的学习中,如果想在uni app操作dom元素的样式的话,建议使用三目运算符 `:class="showActive == 1?activeClass :''"` [20201229112042960.png]: /images/20221120/a75178a2ebca4891b4d88da115a92403.png [20201229113152351.png]: /images/20221120/6ee008e3caa144029f845e77bac0178e.png
还没有评论,来说两句吧...