快捷導(dǎo)航

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

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

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

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

<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é)點(diǎn)，要取到<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中組件傳值的常見方式小結(jié)
在 Vue.js 中,組件之間的數(shù)據(jù)傳遞是一個(gè)常見的需求,Vue 提供了多種方法來實(shí)現(xiàn)這一目標(biāo),包括 props、全局事件總線、消息的訂閱與發(fā)布等,下面我們就來學(xué)習(xí)一下這些方法的具體實(shí)現(xiàn)吧
2023-12-12
Vue組件之間傳值/調(diào)用幾種方式
這篇文章主要介紹了Vue組件之間傳值/調(diào)用的幾種方式,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2022-12-12
vue-cli4創(chuàng)建項(xiàng)目導(dǎo)入Element-UI踩過的坑及解決
這篇文章主要介紹了vue-cli4創(chuàng)建項(xiàng)目導(dǎo)入Element-UI踩過的坑及解決,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-04-04
打通前后端構(gòu)建一個(gè)Vue+Express的開發(fā)環(huán)境
這篇文章主要介紹了打通前后端構(gòu)建一個(gè)Vue+Express的開發(fā)環(huán)境，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2018-07-07
Vue運(yùn)用transition實(shí)現(xiàn)過渡動(dòng)畫
vue的過渡動(dòng)畫，主要是transition標(biāo)簽的使用，配合css動(dòng)畫實(shí)現(xiàn)的。接下來通過本文給大家分享Vue運(yùn)用transition實(shí)現(xiàn)過渡動(dòng)畫效果，感興趣的朋友一起看看吧
2019-05-05
npm run dev報(bào)錯(cuò)信息及解決方法
這篇文章主要為大家介紹了npm run dev報(bào)錯(cuò)信息及解決方法,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
2023-09-09
vue中scss語法的使用你了解嗎
這篇文章主要為大家詳細(xì)介紹了vue中scss語法的使用，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助
2022-03-03
el-tree設(shè)置選中高亮/焦點(diǎn)高亮、選中節(jié)點(diǎn)加深背景及更改字體顏色等的方法
el-tree默認(rèn)有較淺的背景色,這里業(yè)務(wù)需要,選中節(jié)點(diǎn)的字體高亮,更改顏色,下面這篇文章主要給大家介紹了關(guān)于el-tree選中高亮/焦點(diǎn)高亮、選中節(jié)點(diǎn)加深背景及更改字體顏色等的設(shè)置方法,需要的朋友可以參考下
2022-12-12
詳解vue.js的devtools安裝
本篇文章主要介紹了詳解vue.js的devtools安裝，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2017-05-05
vue使用Echart線柱混合圖排坑記錄
這篇文章主要為大家介紹了vue使用Echart線柱混合圖排坑記錄,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
2023-10-10