站长资讯网vue.js操作dom的方法：1、原生js操作dom，代码为【const dom = getElementById(‘box')】；2、使用vue官方方法ref，代码为【< div class=“set” ref=“up”>】。
本教程操作环境：windows7系统、Vue2.9.6版，DELL G3电脑，该方法适用于所有品牌电脑。
【相关文章推荐：vue.js】
vue.js操作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; } /* 添加数据源按钮 */ #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 { /* -webkit-box-shadow: inset 0 0 6px rgba(40, 42, 44, 1); border-radius: 10px; */ } /* 滚动条滑块 */ .addAlert-content::-webkit-scrollbar-thumb { border-radius: 10px; background: rgba(29, 211, 211, 1); /* -webkit-box-shadow: inset 0 0 6px 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。
相关免费学习推荐：javascript学习教程
