1.原生js操作dom
const dom = getElementById('box')
2.vue官方方法: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获取为空)