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