vue3获取dom

作者：惨美歌发布日期:2025-03-27 浏览:108

<template>
  <div ref="myElement">这是一个需要获取的DOM元素</div>
</template>

<script>
import { ref, onMounted } from 'vue';

export default {
  setup() {
    // 使用ref定义一个响应式引用，指向DOM元素
    const myElement = ref(null);

    // 在组件挂载后获取DOM元素
    onMounted(() => {
      // myElement.value 就是实际的DOM元素
      console.log(myElement.value);
    });

    return {
      myElement
    };
  }
};
</script>

解释说明：

ref: 在模板中使用 ref="myElement" 来标记一个 DOM 元素。在 <script> 中通过 ref 定义一个响应式的引用 myElement，它将指向这个 DOM 元素。
onMounted: 这是一个生命周期钩子，在组件挂载完成后执行。在这个钩子中可以通过 myElement.value 获取到实际的 DOM 元素。
返回对象: 最后在 setup 函数中返回 myElement，这样可以在模板中使用它。

通过这种方式，你可以在 Vue 3 中方便地获取和操作 DOM 元素。

上一篇：vue vconsole

下一篇：vue markraw