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";
             // 获取标签属性值
                let w = this.$refs.addAlert.style.clientWidth;   // 获取标签属性
            },
            // 点击 × 关闭新增数据源的弹框
            closeAddAlert(){
                this.$refs.addAlert.style.display = "none";
            },
        },
        created(){
 
        }
    }
</script>

• 另一篇教程
  http://t.csdn.cn/8EBuK

————————————————
版权声明：本文为CSDN博主「坏丶毛病」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_43363884/article/details/88285332