vue3获取dom元素

作者：颓废的爱情发布日期:2025-02-28 浏览:57

<template>
  <div ref="myElement">这是一个DOM元素</div>
</template>

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

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

    // 在组件挂载后获取DOM元素
    onMounted(() => {
      console.log(myElement.value); // 输出: <div>这是一个DOM元素</div>
      // 可以在这里对DOM元素进行操作，例如添加样式或事件监听器
    });

    return {
      myElement // 将引用返回给模板
    };
  }
};
</script>

解释说明：

ref：在Vue 3中，ref用于创建一个响应式的引用。它可以绑定到DOM元素或子组件实例。
onMounted：这是一个生命周期钩子，在组件挂载完成后执行。你可以在这里安全地访问DOM元素。
myElement.value：通过ref绑定的DOM元素可以通过.value属性访问。

如果你需要进一步的操作（如修改样式、添加事件监听器等），可以在onMounted钩子内进行。

上一篇：vue json格式化插件

下一篇：vue3 mixins 代替