基于vue1和vue2获取dom元素的方法

 更新时间:2018年03月17日 12:25:16   作者:mengyunxiu121415  
下面小编就为大家分享一篇基于vue1和vue2获取dom元素的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

vue1.*版本中

在标签中加上el='dom',然后在代码中this.$els.dom这样就拿到了页面元素

例如:<div class='box'  v-el: myBox>你好</div>

让你好的颜色显示为红色:this.$els.my-box.style.color = 'red'

vue2.*版本中

在标签中加上ref='dom',然后在代码中this.$refs.dom这样就拿到了页面元素

例如:<div class='box' ref='myBox'>你好</div>

让你好的颜色显示为红色:this.$refs.myBox.style.color = 'red

以上这篇基于vue1和vue2获取dom元素的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • 使用vue深度选择器修改ElementUI组件内样式的示例代码

    使用vue深度选择器修改ElementUI组件内样式的示例代码

    在带有scoped属性的style中书写样式时,无法作用影响到子组件中的样式,此时我们会使用到deep深度选择器,来解决此问题,我们在使用less预处理器,能正常使用,但是在scss预处理器中会报错,下面通过本文介绍vue深度选择器修改ElementUI组件内样式,需要的朋友可以参考下
    2022-12-12
  • 浅谈VUE中演示v-for为什么要加key

    浅谈VUE中演示v-for为什么要加key

    这篇文章主要介绍了浅谈VUE中演示v-for为什么要加key,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-01-01
  • vue实现分页的三种效果

    vue实现分页的三种效果

    这篇文章主要为大家详细介绍了vue实现分页的三种效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-06-06
  • Vue+mui实现图片的本地缓存示例代码

    Vue+mui实现图片的本地缓存示例代码

    这篇文章主要介绍了Vue+mui实现图片的本地缓存的实例代码,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-05-05
  • vue和iview实现Scroll 数据无限滚动功能

    vue和iview实现Scroll 数据无限滚动功能

    今天小编就为大家分享一篇vue和iview实现Scroll 数据无限滚动功能,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-10-10
  • 详解vue3.0 的 Composition API 的一种使用方法

    详解vue3.0 的 Composition API 的一种使用方法

    这篇文章主要介绍了vue3.0 的 Composition API 的一种使用方法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-10-10
  • 如何在vue中更优雅的封装第三方组件详解

    如何在vue中更优雅的封装第三方组件详解

    在封装第三方组件中,经常会遇到一个问题,下面这篇文章主要给大家介绍了关于如何在vue中更优雅的封装第三方组件的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下
    2022-05-05
  • 解决vue-cli webpack打包开启Gzip 报错问题

    解决vue-cli webpack打包开启Gzip 报错问题

    这篇文章主要介绍了vue-cli webpack打包开启Gzip 报错问题的解决方法,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-07-07
  • 解决vant框架做H5时踩过的坑(下拉刷新、上拉加载等)

    解决vant框架做H5时踩过的坑(下拉刷新、上拉加载等)

    这篇文章主要介绍了解决vant框架做H5时踩过的坑(下拉刷新、上拉加载等),具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-11-11
  • vuejs2.0实现分页组件使用$emit进行事件监听数据传递的方法

    vuejs2.0实现分页组件使用$emit进行事件监听数据传递的方法

    这篇文章主要介绍了vuejs2.0实现分页组件使用$emit进行事件监听数据传递的方法,非常不错,具有参考借鉴价值,,需要的朋友可以参考下
    2017-02-02

最新评论