快捷導(dǎo)航

Vue3使用ref解決GetElementById為空的問(wèn)題

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

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

1.Vue3 中 ref 訪問(wèn)單個(gè)元素

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

注意：

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

2.Vue3 中 ref 訪問(wèn)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é)點(diǎn)，要取到<p>,則需要從childNodes中獲取

itemRefs.value[i].childNodes[0]

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

您可能感興趣的文章:

相關(guān)文章

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