vue操作dom元素的三种方法介绍和分析

相信大家在做项目的时候，肯定会遇到这样的问题：我点击新增按钮，需要弹出个弹框，然后我点击对应的关闭按钮，关闭弹框，但是新增按钮和关闭按钮操作的是另一个元素，所以需要获取dom元素进行操控，那么在vue中怎么操作dom呢？

以下是常用的三种方法：

1、jQuery操作dom（推荐指数：★☆☆☆☆）：

只要拿jQuery的选择器，选中相应的dom进行操作就可以了，但是大家都知道jQuery获取元素是查找页面所有，相当于“循环”所有元素直至找到需要的dom，但是vue是单页面的，jQuery获取dom并不只是获取vue当前页面，而是从根路由开始查找所有，当其他页面出现相同的元素，也会被获取到，而且jQuery操作的dom，如果是根据动态获取数据渲染的，那么写在mounted里的操作方法将会失效，必须放到updated里，这样会导致有些操作被执行多遍，所以还是不建议在vue中使用jQuery。

2、原生js操作dom（推荐指数：★★★★☆）：

原生js获取dom就很简单了，例如：根据id、class、当前元素的上一个元素......

3、vue官方方法：ref（推荐指数：★★★★★）：

vue中的ref是把当前dom元素 “ 抽离出来 ” ，只要通过 this.$refs就可以获取到（注意this指向），此方法尤其适用于父元素需要操作子组件的dom元素，这也是子传父传递数据的一种方法

下面让我来看个案例：

设置了一个button按钮，通过点击事件，然后弹出新增的弹框 , 然后点击 “ × ”的button按钮，关闭弹框，此时需要操作弹框的dom元素，通过ref定义一个名字，然后在方法中通过 this.$refs.名字获取对应的dom

<template><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>
</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>/* 容器 */.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{width: 500px;height: 600px;background: #2b2c2f;position: fixed;left: calc(50% - 250px);top: calc(50% - 300px);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%;height: 550px;overflow-x: hidden;overflow-y: auto;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>

效果图：

以上就是vue中操作dom的方法

如有问题，请指出，接受批评。

个人微信公众号：

vue操作dom元素的三种方法介绍和分析相关推荐

vue项目刷新当前页面的三种方法
本文介绍了vue项目刷新当前页面的三种方法,本文图文并茂给大家介绍的非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下. 想必大家在刨坑vue的时候也遇到过下面情形:比如在删除或者增加一条记录的时 ...
组件Refs(操作DOM的2⃣️两种方法)
组件Refs(操作DOM的2⃣️两种方法) 第一种方式 var mySubmitButton = document.getElementById('submitButton'); console.lo ...
C语言中调用数组元素的三种方法：下标法、数组名法、指针法
/*调用数组元素的三种方法:下标法.数组名法.指针法*/ #include<stdio.h> int main() {int a[] = { 1,2,3,4,5 }, i, * p;pri ...
向列表增加元素的三种方法
向列表增加元素的三种方法 ,分别是:append().extend() 和 insert(). append() 方法是将参数作为一个元素增加到列表的末尾. extend() 方法是将参数作为一个列 ...
JAVA输出数组元素的三种方法（for/for each/toString）
2022_02_19学习输出数组元素的三种方法以及c语言和java中数组的不同点方法一:for循环输出数组元素方法二:for each循环语句方法三:Arrays类中的toString方法 c语 ...
java equals 判断空_Java 判断字符串是否为空的三种方法与性能分析
[java中判断字符串是否为数字的三种方法 1>用JAVA自带的函数 public static boolean isNumeric(String str){ for (int i = s ...
html图层透明度,ps图层透明度怎么调整?Photoshop中调整图层透明度的三种方法介绍...
Photoshop里面怎么调整图层的透明度?作为一个"切图仔",切图的时候,看到总有透明的图层估计是最头痛的事,不知道其他人怎么样,个人却是最怕做透明的样式..扯远了,但确实因为要 ...
java 获取键盘点击_Java中获取键盘输入值的三种方法介绍
程序开发过程中,需要从键盘获取输入值是常有的事,但Java它偏偏就没有像c语言给我们提供的scanf(),C++给我们提供的cin()获取键盘输入值的现成函数!Java没有提供这样的函数也不代表遇到这 ...
cad画直角命令_在cad中怎么画角度?cad画角度三种方法介绍
cad是应用最广泛的计算机辅助设计软件,学会使用cad怎么画角度是必不可少的,尤其是对于新手来说,更应该学习.那么在cad中怎么画角度?下面小编就为大家介绍三种cad画角度方法,希望对大家有所帮助! ...

vue操作dom元素的三种方法介绍和分析

vue操作dom元素的三种方法介绍和分析相关推荐

最新文章

热门文章