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

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

1.  
   <template>
2.  
   <div class="index-box">
3.  
   <!--新增按钮-->
4.  
   <input type="button" id="DbManagement-addBtn" @click="showAddAlert" value="新增">
5.  
   <!--新增数据源弹框-->
6.  
   <div class="addDbSource-alert" ref="addAlert">
7.  
   <div class="addAlert-top">
8.  
   添加数据源
9.  
   <input type="button" value="×" class="addAlert-close" @click="closeAddAlert">
10.  
    </div>
11.  
    <div class="addAlert-content">
12.  
    <div style="height: 1000px;"></div>
13.  
    </div>
14.  
    </div>
15.  
    </div>
16.  
    </template>
17.  
     
18.  
    <script>
19.  
    export default {
20.  
    name: "Index",
21.  
    data(){
22.  
    return {
23.  
     
24.  
    }
25.  
    },
26.  
    methods:{
27.  
    // 点击新增按钮，弹出新增数据源的弹框
28.  
    showAddAlert(){
29.  
    this.$refs.addAlert.style.display = "block";
30.  
    },
31.  
    // 点击 × 关闭新增数据源的弹框
32.  
    closeAddAlert(){
33.  
    this.$refs.addAlert.style.display = "none";
34.  
    },
35.  
    },
36.  
    created(){
37.  
     
38.  
    }
39.  
    }
40.  
    </script>
41.  
     
42.  
    <style scoped>
43.  
    /* 容器 */
44.  
    .index-box{
45.  
    width: 100%;
46.  
    height: 100%;
47.  
    background: #212224;
48.  
    display: flex;
49.  
    }
50.  
    /* 添加数据源按钮 */
51.  
    #DbManagement-addBtn {
52.  
    width: 100px;
53.  
    height: 45px;
54.  
    border: none;
55.  
    border-radius: 10px;
56.  
    background: rgba(29, 211, 211, 1);
57.  
    box-shadow: 2px 2px 1px #014378;
58.  
    margin-left: 20px;
59.  
    margin-top: 17px;
60.  
    cursor: pointer;
61.  
    font-size: 20px;
62.  
    }
63.  
    /*新增数据源弹框*/
64.  
    .addDbSource-alert{
65.  
    width: 500px;
66.  
    height: 600px;
67.  
    background: #2b2c2f;
68.  
    position: fixed;
69.  
    left: calc(50% - 250px);
70.  
    top: calc(50% - 300px);
71.  
    display: none;
72.  
    }
73.  
    /*新增弹框头部*/
74.  
    .addAlert-top{
75.  
    width: 100%;
76.  
    height: 50px;
77.  
    background: #1dd3d3;
78.  
    line-height: 50px;
79.  
    font-size: 20px;
80.  
    box-sizing: border-box;
81.  
    padding-left: 20px;
82.  
    }
83.  
    /*新增弹框关闭*/
84.  
    .addAlert-close{
85.  
    background: #1dd3d3;
86.  
    border: none;
87.  
    font-size: 30px;
88.  
    cursor: pointer;
89.  
    float: right;
90.  
    margin-right: 20px;
91.  
    margin-top: 5px;
92.  
    }
93.  
    /*新增弹框内容部分*/
94.  
    .addAlert-content{
95.  
    width: 100%;
96.  
    height: 550px;
97.  
    overflow-x: hidden;
98.  
    overflow-y: auto;
99.  
    box-sizing: border-box;
100.  
     padding: 0px 30px 20px;
101.  
     }
102.  
     /* 滚动条效果 */
103.  
     /* 设置滚动条的样式 */
104.  
     .addAlert-content::-webkit-scrollbar {
105.  
     width: 5px;
106.  
     }
107.  
     /* 滚动槽 */
108.  
     .addAlert-content::-webkit-scrollbar-track {
109.  
     /* -webkit-box-shadow: inset 0 0 6px rgba(40, 42, 44, 1);
110.  
     border-radius: 10px; */
111.  
     }
112.  
     /* 滚动条滑块 */
113.  
     .addAlert-content::-webkit-scrollbar-thumb {
114.  
     border-radius: 10px;
115.  
     background: rgba(29, 211, 211, 1);
116.  
     /* -webkit-box-shadow: inset 0 0 6px rgba(29, 211, 211, 1); */
117.  
     }
118.  
     .addAlert-content::-webkit-scrollbar-thumb:window-inactive {
119.  
     background: rgba(29, 211, 211, 1);
120.  
     }
121.  
     </style>

效果图：

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

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