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

时间:2021-05-26

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 { } .addAlert-content::-webkit-scrollbar-thumb { border-radius: 10px; background: 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元素方法内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持!

声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。

相关文章