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