快捷導(dǎo)航

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

更新時(shí)間：2022年08月25日 16:26:35 作者：好巧.

這篇文章主要介紹了vue?3.0?使用ref獲取dom元素,包括vue2.x獲取dom和vue3.0獲取單個(gè)dom，通過示例代碼給大家介紹的非常詳細(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)然，如果你覺得文章有什么讓你覺得不合理、或者有更簡單的實(shí)現(xiàn)方法又或者有理解不來的地方，希望你在看到之后能夠在評(píng)論里指出來，我會(huì)在看到之后盡快的回復(fù)你。

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

您可能感興趣的文章:

相關(guān)文章

vue-router的beforeRouteUpdate不觸發(fā)問題
這篇文章主要介紹了vue-router的beforeRouteUpdate不觸發(fā)問題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-04-04
Vue組合式API如何正確解構(gòu)props不會(huì)丟失響應(yīng)性
響應(yīng)式?API?賦予了組合式?API?一大坨可能性的同時(shí),代碼精簡,雖然但是,我們應(yīng)該意識(shí)到響應(yīng)性的某些陷阱,比如丟失響應(yīng)性,在本文中,我們將學(xué)習(xí)如何正確解構(gòu)?Vue?組件的?props,使得?props?不會(huì)丟失響應(yīng)性
2024-01-01
vue?element?el-select下拉滾動(dòng)加載的方法
很多朋友都遇到這樣一個(gè)問題在使用vue+element的el-select下拉框加載返回?cái)?shù)據(jù)太多時(shí)，會(huì)造成卡頓，用戶體驗(yàn)欠佳，這篇文章主要介紹了vue?element?el-select下拉滾動(dòng)加載方法,需要的朋友可以參考下
2022-11-11
詳解如何在Vue3中與后端API進(jìn)行交互
在現(xiàn)代的 web 應(yīng)用中,與后端 API 的交互成為了不可或缺的一部分,特別是在 Vue 3 這樣的前端框架中,如何高效地進(jìn)行數(shù)據(jù)請(qǐng)求,處理響應(yīng),本文將帶您深入了解在 Vue 3 中如何與后端 API 進(jìn)行交互,并通過示例代碼幫助您快速上手,需要的朋友可以參考下
2025-01-01
解決在Vue中使用axios用form表單出現(xiàn)的問題
今天小編就為大家分享一篇解決在Vue中使用axios用form表單出現(xiàn)的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
2019-10-10
詳解vue?route介紹、基本使用、嵌套路由
vue-router是Vue.js官方的路由插件，它和vue.js是深度集成的，適合用于構(gòu)建單頁面應(yīng)用，這篇文章主要介紹了vue?route介紹、基本使用、嵌套路由,需要的朋友可以參考下
2022-08-08
vue請(qǐng)求后端數(shù)據(jù)和跨域問題解決
這篇文章主要介紹了vue請(qǐng)求后端數(shù)據(jù)和跨域問題,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2023-05-05
vue3組件的v-model:value與v-model的區(qū)別解析
在Vue3中,v-model和v-model:value都是用于實(shí)現(xiàn)雙向數(shù)據(jù)綁定的語法糖,但v-model:value提供了更顯式和靈活的綁定方式,允許你明確指定綁定的屬性名和事件名,它們的主要區(qū)別在于默認(rèn)行為、靈活性、多模型綁定和使用場景,感興趣的朋友一起看看吧
2025-02-02
vue實(shí)現(xiàn)卡片遮罩層交互式功能
在前端開發(fā)中,卡片遮罩層是一種常見的交互設(shè)計(jì)元素,用于強(qiáng)調(diào)某個(gè)區(qū)域或內(nèi)容,并提供用戶操作的入口,本文將帶大家在?vue?中結(jié)合實(shí)際案例實(shí)現(xiàn)此功能,感興趣的朋友一起看看吧
2024-08-08
Vue監(jiān)聽頁面變化的實(shí)現(xiàn)方法小結(jié)
在Vue.js應(yīng)用開發(fā)過程中,監(jiān)聽頁面變化是一個(gè)非常常見的需求,無論是為了響應(yīng)用戶交互、優(yōu)化性能,還是實(shí)現(xiàn)復(fù)雜的業(yè)務(wù)邏輯,監(jiān)聽頁面變化的能力都是不可或缺的,本文將詳細(xì)介紹如何在Vue項(xiàng)目中實(shí)現(xiàn)頁面變化監(jiān)聽,需要的朋友可以參考下
2024-10-10