vue 获取 DOM 元素的方法

蓓蕾心晴

发布于 2023-02-17 13:31:44

5.3K0

发布于 2023-02-17 13:31:44

文章被收录于专栏：前端小叙

1 .原生js获取 DOM 节点

document.querySelector(选择器)
document.getElementById(id选择器)
document.getElementsByClassName(class选择器)
....

2. vue2中获取当前组件的实例对象

因为每个 vue 的组件实例上，都包含一个 refs 对象，里面存储着对应的 DOM 元素或组件的引用。所以在默认情况下，组件的 refs 指向一个空对象。

可以先在组件上加上 ref="名字" ，然后通过 this.$refs.名字获取相应元素并进行操作。

<template>
  <div class="box">
    <h1 ref="divDom">这是一个测试样例</h1>
    <button ref="but">按钮</button>
  </div>
</template>
 
<script>
 
export default {
  data() {
    return {
    }
  },
  methods: {
    showThis(){
      // h1的实例对象 
      console.log(this);
      this.$refs.divDom.style.color='yellow'
      //引用到组件的实例之后，也可以调用组件上的 methods方法
      this.$refs.but.click();
    },
  },
}
</script>

3.vue3中获取当前组件的实例对象

1.创建 ref 变量，给组件或元素绑定 ref 属性值为该变量

2. 通过变量.value获取

<template>
    <div ref="container"></div>
</template>
 
<script setup>
    import { ref } from 'vue';
    
    const container = ref(null);
    onMounted(()=>{
        console.log('获取dom元素',container.value)
    })
</script>

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2023-02-02，如有侵权请联系 cloudcommunity@tencent.com 删除

编程算法