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

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

原文：https://www.cnblogs.com/GoodMemoryBlog/p/14295727.html