vue 3.0怎么使用ref获取dom元素

这篇文章主要讲解了“vue 3.0怎么使用ref获取dom元素”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“vue 3.0怎么使用ref获取dom元素”吧！

Vue 2.x获取DOM

<div ref="myRef"></div>
this.$refs.myRef

Vue 3.0获取单个DOM

<template>
  <div ref="myRef">获取单个DOM元素</div>
</template>

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

export default {
  setup() {
    const myRef = ref(null);

    onMounted(() => {
      console.dir(myRef.value);
    });
 
    return {
      myRef
    };
  }
};
</script>

Vue 3.0获取多个DOM(一般用于获取数组)

<template>
  <div>获取多个DOM元素</div>
  <ul>
    <li v-for="(item, index) in arr" :key="index" :ref="setRef">
      {{ item }}
    </li>
  </ul>
</template>

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

export default {
  setup() {
    const arr = ref([1, 2, 3]);

    // 存储dom数组
    const myRef = ref([]);

    const setRef = (el) => {
      myRef.value.push(el);
    };

    nextTick(() => {
      console.dir(myRef.value);
    });

    return {
      arr,
      setRef
    };
  }
};
</script>

注：console.dir()可以显示一个对象所有的属性和方法

效果图：

感谢各位的阅读，以上就是“vue 3.0怎么使用ref获取dom元素”的内容了，经过本文的学习后，相信大家对vue 3.0怎么使用ref获取dom元素这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是亿速云，小编将为大家推送更多相关知识点的文章，欢迎关注！