vue?3.0怎么使用ref獲取dom元素

這篇文章主要講解了“vue 3.0怎么使用ref獲取dom元素”，文中的講解內(nèi)容簡(jiǎn)單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“vue 3.0怎么使用ref獲取dom元素”吧！

Vue 2.x獲取DOM

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

Vue 3.0獲取單個(gè)DOM

<template>
  <div ref="myRef">獲取單個(gè)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獲取多個(gè)DOM(一般用于獲取數(shù)組)

<template>
  <div>獲取多個(gè)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]);

    // 存儲(chǔ)dom數(shù)組
    const myRef = ref([]);

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

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

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

注：console.dir()可以顯示一個(gè)對(duì)象所有的屬性和方法

效果圖：

感謝各位的閱讀，以上就是“vue 3.0怎么使用ref獲取dom元素”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對(duì)vue 3.0怎么使用ref獲取dom元素這一問題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是億速云，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！