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获取为空)


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM