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还要吗？
那我把代码全粘过来你们自己看吧

<template>
	<div id="app">
		<div class="index-box">
			<!--新增按钮-->
			<input type="button" id="DbManagement-addBtn" @click="showAddAlert" value="新增">
			<!--新增数据源弹框-->
			<div class="addDbSource-alert" ref="addAlert">
				<div class="addAlert-top">
					<!--添加数据源-->
					<input type="button" value="×" class="addAlert-close" @click="closeAddAlert">
				</div>
				<div class="addAlert-content">
					<div style="height: 1000px;"></div>
				</div>
			</div>
		</div>
	</div>
</template>
<script> export default {  name: "Index", data(){  return {  } }, methods:{  // 点击新增按钮，弹出新增数据源的弹框 showAddAlert(){  this.$refs.addAlert.style.display = "block"; }, // 点击 × 关闭新增数据源的弹框 closeAddAlert(){  this.$refs.addAlert.style.display = "none"; }, }, created(){  } } </script>
<style scoped> #app{  width:100%; height:100%; overflow-y:auto; }  .index-box{  width: 100%; height: 100%; background: #212224; display: flex; }  #DbManagement-addBtn {  width: 100px; height: 45px; border: none; border-radius: 10px; background: rgba(29, 211, 211, 1); box-shadow: 2px 2px 1px #014378; margin-left: 20px; margin-top: 17px; cursor: pointer; font-size: 20px; }  .addDbSource-alert{  position: fixed; top:0;left:0;right:0;bottom:0; margin:auto; width: 4rem;height: 4rem; background: #2b2c2f; display: none; }  .addAlert-top{  width: 100%; height: 50px; background: #1dd3d3; line-height: 50px; font-size: 20px; box-sizing: border-box; padding-left: 20px; }  .addAlert-close{  background: #1dd3d3; border: none; font-size: 30px; cursor: pointer; float: right; margin-right: 20px; margin-top: 5px; }  .addAlert-content{  width: 100%; box-sizing: border-box; padding: 0px 30px 20px; }   .addAlert-content::-webkit-scrollbar {  width: 5px; }  .addAlert-content::-webkit-scrollbar-track {   }  .addAlert-content::-webkit-scrollbar-thumb {  border-radius: 10px; background: rgba(29, 211, 211, 1);  } .addAlert-content::-webkit-scrollbar-thumb:window-inactive {  background: rgba(29, 211, 211, 1); } </style>

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

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

3.jQuery操作dom

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

文中部分代码摘录自微信公众平台作者 “ 一只前端小菜鸟 ”，喜欢请支持原作者，感谢！