vue 切换页面没有改变滚动条_vue操作dom元素的三种方法

1.原生js操作dom

const dom = getElementById(‘box’)

2.vue官方方法：ref

vue中的ref是把当前dom元素 “ 抽离出来 ” ，只要通过 this.$refs就可以获取到

< div class=“set” ref=“up”>
.set是我们要操作的dom对象，它的ref是 up

@click=“Alert”
给父元素一个点击事件，

接下来我们来编写这个方法
methods:{
this.$refs.addAlert.style.display = “block”;
}

CSS还要吗？
那我把代码全粘过来你们自己看吧

<

CSS比正文和脚本加起来都多，如果你能看懂CSS，没理由学不会 ref

还有第三种方法，jQuery 操作dom，看完以后直呼不敢用

3.jQuery操作dom

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

————————————————

版权声明：本文为CSDN博主「我不是费圆」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。

原文链接：

vue操作dom元素的三种方法_weixin_45820444的博客-CSDN博客​blog.csdn.net