vue操作dom元素的3种方法示例

1.原生js操作dom

const dom = getElementById('box')

2.vue官方方法：ref

组件 ref

<div class="set" ref="up">

该元素是我们要操作的dom对象，它的ref是 up

@click="Alert"

给元素一个点击事件,编写对应的方法部分代码

  this.$refs.up.style.display = "block";

注意:如果要操作的元素是处于 隐藏和显示 状态中,此时多次操作refs可能会导致获取到的元素为空,这是因为 $refs 只会在组件渲染完成之后生效， ref 本身作为渲染结果被创建，在初始渲染的时候不能访问他们，是不存在的。并且它们不是响应式的，所有的动态加载的模板更新它都无法相应的变化。只在组件渲染完成后才填充，用于元素或子组件注册引用信息，注册完成，将会注册在父组件 $refs 对象上。时常隐藏和显示元素操作会导致在渲染完成前获取元素时为空报错。

3.jQuery操作dom

只要拿jQuery的选择器，选中相应的dom进行操作就可以了，但是大家都知道jQuery获取元素是查找页面所有，相当于“循环”所有元素直至找到需要的dom，但是vue是单页面的，jQuery获取dom并不只是获取vue当前页面，而是从根路由开始查找所有，当其他页面出现相同的元素，也会被获取到，而且jQuery操作的dom，如果是根据动态获取数据渲染的，那么写在mounted里的操作方法将会失效，必须放到updated里，这样会导致有些操作被执行多遍，所以还是不建议在vue中使用jQuery。

可参考文献地址:
vue中ref的使用（this.$refs获取为空）

__EOF__

本文作者：damarkday知识库
本文链接：https://www.cnblogs.com/GoodMemoryBlog/p/14295727.html
关于博主：评论和私信会在第一时间回复。或者直接私信我。
版权声明：本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！
声援博主：如果您觉得文章对您有帮助，可以点击文章右下角【推荐】一下。您的鼓励是博主的最大动力！