快捷導(dǎo)航

Vue3使用ref解決GetElementById為空的問題

更新時間：2023年12月04日 11:07:30 作者：程序員正茂

今天遇到一個問題,就是在Vue3組件中需要獲取template中的元素節(jié)點,使用GetElementById返回的卻是null,網(wǎng)上查找了好些資料,才發(fā)需要使用ref,所以本文給大家介紹了Vue3組件中如何使用ref解決GetElementById為空的問題,需要的朋友可以參考下

1.Vue3 中 ref 訪問單個元素

<template>
  <div ref="hello">我愛北京天安門</div>
</template>
<script setup lang="ts">
import { onMounted, ref } from "vue";
const hello = ref<any>(null);
onMounted(() => {
  console.log(hello.value); // <div>我愛北京天安門</div>
});
</script>

注意：

變量名稱必須要與 ref 命名的屬性名稱一致。
通過 hello.value 的形式獲取 DOM 元素。
必須要在 DOM 渲染完成后才可以獲取 hello.value，否則就是 null。

2.Vue3 中 ref 訪問v-for元素

<template>
  <ul>
    <li v-for="item in 10" ref="itemRefs">
      <p>{{item}} - 同學(xué)</p>
    </li>
  </ul>
</template>
<script setup lang="ts">
import { onMounted, ref } from "vue";
 
 
const itemRefs = ref<any>([]);
onMounted(() => {
  console.log(itemRefs.value);
});
</script>

注意，這里取到的是<li>元素節(jié)點，要取到<p>,則需要從childNodes中獲取

itemRefs.value[i].childNodes[0]

到此這篇關(guān)于Vue3使用ref解決GetElementById為空的問題的文章就介紹到這了,更多相關(guān)Vue3 ref解決GetElementById為空內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

Vue中的驗證登錄狀態(tài)的實現(xiàn)方法
這篇文章主要介紹了Vue中的驗證登錄狀態(tài)的實現(xiàn)方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2019-03-03
vue中this.$refs.name.offsetHeight獲取不到值問題
這篇文章主要介紹了vue中this.$refs.name.offsetHeight獲取不到值問題及解決，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2023-05-05
vite中的glob-import批量導(dǎo)入的實現(xiàn)
本文主要介紹了vite中的glob-import批量導(dǎo)入的實現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2023-07-07
element-ui upload組件上傳文件類型限制問題小結(jié)
最近我遇到這樣的問題,接受類型已經(jīng)加了accept 但是當(dāng)選擇彈出本地選擇文件時候切換到所有文件之前的文件類型就本根過濾不掉了,下面小編給大家介紹element-ui upload組件上傳文件類型限制問題小結(jié),感興趣的朋友一起看看吧
2024-02-02
vue3?setup語法糖之組件傳參(defineProps、defineEmits、defineExpose)示例詳
defineProps?和?defineEmits?都是只能在?<script?setup>?中使用的編譯器宏，他們不需要導(dǎo)入，且會隨著?<script?setup>?的處理過程一同被編譯掉，這篇文章主要介紹了vue3?setup語法糖之組件傳參(defineProps、defineEmits、defineExpose)示例詳解,需要的朋友可以參考下
2023-01-01
Vue 概述及基本使用詳解
Vue是一套用于構(gòu)建用戶界面的漸進式框架,與其它大型框架不同的是,Vue 被設(shè)計為可以自底向上逐層應(yīng)用,本文給大家介紹Vue 概述及基本使用,感興趣的朋友跟隨小編一起看看吧
2025-10-10
vue?使用el-table循環(huán)生成表格的過程
這篇文章主要介紹了vue?使用el-table循環(huán)生成表格的過程，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-04-04
Pinia入門學(xué)習(xí)之實現(xiàn)簡單的用戶狀態(tài)管理
Vue3雖然相對于Vue2很多東西都變了,但是核心的東西還是沒有變,比如說狀態(tài)管理、路由等,再Vue3中尤大神推薦我們使用pinia來實現(xiàn)狀態(tài)管理,他也說pinia就是Vuex的新版本,這篇文章主要給大家介紹了關(guān)于Pinia入門學(xué)習(xí)之實現(xiàn)簡單的用戶狀態(tài)管理的相關(guān)資料,需要的朋友可以參考下
2022-11-11
使用vux實現(xiàn)上拉刷新功能遇到的坑
最近公司在研發(fā)app,選擇了基于Vue框架的vux組件庫，現(xiàn)總結(jié)在實現(xiàn)上拉刷新功能遇到的坑,感興趣的朋友參考下吧
2018-02-02
Vue組件模板的幾種書寫形式(3種)
這篇文章主要介紹了Vue組件模板的幾種書寫形式(3種)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2020-02-02