vue.js操作dom的方法：1、原生js操作dom，代码为【const dom = getelementbyid(‘box')】；2、使用vue官方方法ref，代码为【70e04e56306fca8abf37949ebbeba492】。
本教程操作环境：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学习教程
以上就是vue.js如何操作dom的详细内容。