欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue?3.0?使用ref獲取dom元素的示例

 更新時(shí)間：2022年08月25日 16:26:35   作者：好巧.  
這篇文章主要介紹了vue?3.0?使用ref獲取dom元素,包括vue2.x獲取dom和vue3.0獲取單個(gè)dom，通過(guò)示例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

前言

附上vue3.0文檔：Vue3中文文檔 - vuejs

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ì)象所有的屬性和方法

效果圖：

在這里插入圖片描述

如果本篇文章對(duì)你有幫助的話，很高興能夠幫助上你。

當(dāng)然，如果你覺(jué)得文章有什么讓你覺(jué)得不合理、或者有更簡(jiǎn)單的實(shí)現(xiàn)方法又或者有理解不來(lái)的地方，希望你在看到之后能夠在評(píng)論里指出來(lái)，我會(huì)在看到之后盡快的回復(fù)你。

到此這篇關(guān)于vue 3.0 使用ref獲取dom元素的文章就介紹到這了,更多相關(guān)vue ref獲取dom元素內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

最新評(píng)論