Rumah  >  Artikel  >  hujung hadapan web  >  Bagaimana untuk mendapatkan nod elemen melalui ref dalam vue3

Bagaimana untuk mendapatkan nod elemen melalui ref dalam vue3

PHPz
PHPzke hadapan
2023-05-16 12:25:065099semak imbas

Dapatkan nod elemen melalui ref

ref Dalam vue2, ia boleh dikatakan memudahkan operasi document.getElementById("#id") asli js. Sudah tentu, ia adalah sama dalam vue3

Mula-mula, berikan elemen yang anda mahu dapatkan atribut ref

Bagaimana untuk mendapatkan nod elemen melalui ref dalam vue3

Kemudian, buat objek ref, hanya Its nilai boleh diakses

tetapi. Ini boleh diakses dalam persediaan, tetapi nilai yang dicetak secara langsung adalah batal...

Bagaimana untuk mendapatkan nod elemen melalui ref dalam vue3

Memandangkan masa pelaksanaan fungsi persediaan mendahului Rendering tag html, jadi kami tidak boleh memulakan teg kotak secara langsung dalam fungsi persediaan.

Dalam fungsi kitaran hayat, fungsi persediaan dilaksanakan antara beforeCreate dan Created

Sekiranya terdapat permulaan atau operasi serupa, anda perlu meminjam onMounted dalam fungsi kitaran hayat

Bagaimana untuk mendapatkan nod elemen melalui ref dalam vue3

Dengan cara ini anda boleh mengakses

Bagaimana untuk mendapatkan nod elemen melalui ref dalam vue3

Ringkasan beberapa cara untuk mendapatkan elemen ref

1 native js

document.querySelector(选择器)
document.getElementById(id选择器)
document.getElementsByClassName(class选择器)

2. ref mendapat satu elemen dom

<template>
   <div ref=&#39;divDom&#39;></div> 
</template>
<script setup>
import { ref} from &#39;vue&#39;
const divDom = ref(null);
onMounted(()=>{
    console.log(&#39;获取dom元素&#39;,divDom)
})

3. ref mendapat elemen dom dalam gelung v-for

<template>
   <div ref=&#39;getDivDom&#39; v-for="item in list" :data-id="item.id"></div> 
</template>
<script setup>
import { ref} from &#39;vue&#39;
const divDomList = ref(new Map());

const getDivDom = el=>{
    if(el){
        divDomList.set(el.dataset[&#39;id&#39;],el) 
    }
}
// const el =divDomList.get(id) // 根据list数据中的id值 获取对应的dom元素

4 daripada swiper dalam swiper

<template>
   <swiper @swiper=&#39;getSwiper&#39;></swiper > 
</template>
<script setup>
import swiper from &#39;swiper&#39;
import { ref} from &#39;vue&#39;
const swiperDom= ref(null);

const getSwiper= el=>{
    swiperDom.value = el;
}

Atas ialah kandungan terperinci Bagaimana untuk mendapatkan nod elemen melalui ref dalam vue3. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Artikel ini dikembalikan pada:yisu.com. Jika ada pelanggaran, sila hubungi admin@php.cn Padam