vue操作dom元素的3种方法示例
编程学习 2021-07-04 14:06www.dzhlxh.cn编程入门
这篇文章主要给大家介绍了关于vue操作dom元素的3种方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们狼蚁网站SEO优化随着长沙网络推广来一起学习学习吧
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。
总结
到此这篇关于vue操作dom元素的3种方法示例的文章就介绍到这了,更多相关vue操作dom元素方法内容请搜索狼蚁SEO以前的文章或继续浏览狼蚁网站SEO优化的相关文章希望大家以后多多支持狼蚁SEO！
上一篇：微信小程序获取当前时间及星期几的实例代码
下一篇：npm ci命令的基本使用方法