vue操作dom元素的3种方法示例

2023-07-16 11:01:03 68

1.原生js操作dom

constdom=getElementById(‘box')

2.vue官方方法：ref

vue中的ref是把当前dom元素“抽离出来”，只要通过this.$refs就可以获取到

.set是我们要操作的dom对象，它的ref是up

@click=“Alert”

给父元素一个点击事件，

接下来我们来编写这个方法

methods:{
 this.$refs.addAlert.style.display=“block”;
}

CSS还要吗？

那我把代码全粘过来你们自己看吧




	#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:2px2px1px#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:0px30px20px;
}
/*滚动条效果*/
/*设置滚动条的样式*/
.addAlert-content::-webkit-scrollbar{
width:5px;
}
/*滚动槽*/
.addAlert-content::-webkit-scrollbar-track{
/*-webkit-box-shadow:inset006pxrgba(40,42,44,1);
border-radius:10px;*/
}
/*滚动条滑块*/
.addAlert-content::-webkit-scrollbar-thumb{
border-radius:10px;
background:rgba(29,211,211,1);
/*-webkit-box-shadow:inset006pxrgba(29,211,211,1);*/
}
.addAlert-content::-webkit-scrollbar-thumb:window-inactive{
background:rgba(29,211,211,1);
}

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元素方法内容请搜索毛票票以前的文章或继续浏览下面的相关文章希望大家以后多多支持毛票票！

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

vue操作dom元素的3种方法示例

热门推荐

随机推荐