时间: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邮箱联系删除。
1、基础知识:Java解析XML一般有四种方法:DOM、SAX、JDOM、DOM4J。2、使用介绍1)、DOM(1)简介由W3C(org.w3c.dom)提供的
this.$refs['通过设置ref获取到的dom元素'].getBoundingClientRect();//示例:获取元素距离顶部的距离this.$ref
什么是Vue指令?指令是一种可以附加到DOM元素的微命令(tinycommands).它们通常以"v-"作为前缀,以方便Vue知道你在使用一种特殊的标记
前面的话 每个元素都有一个或者多个特性,这些特性的用途就是给出相应元素或者其内容的附加信息。操作特性的DOM方法主要有3个:getAttribute()方法、
官网尽管提供了toggleRowSelection方法,但没有提供demo实例。通过了解,结合vue的特殊属性ref引用到Dom元素上,再执行dom上的togg