Rumah > hujung hadapan web > View.js > teks badan

Bagaimana untuk mendapatkan dom dalam vue

下次还敢
Lepaskan: 2024-04-30 05:36:17
asal
713 orang telah melayarinya

Dalam Vue.js, anda boleh mendapatkan elemen DOM dalam empat cara: gunakan ref untuk membuat rujukan untuk komponen atau elemen DOM, gunakan querySelector untuk mendapatkan elemen DOM berdasarkan pemilih CSS; event.target Mendapat elemen DOM yang mencetuskan peristiwa apabila peristiwa itu berlaku.

Bagaimana untuk mendapatkan dom dalam vue

Mendapatkan DOM dalam Vue

Dalam Vue.js, terdapat beberapa cara untuk mendapatkan elemen DOM, bergantung pada keperluan sebenar.

1 Cipta rujukan kepada komponen atau elemen DOM melalui atribut ref

. Dalam komponen, rujukan boleh diakses menggunakan this.$refs. Untuk elemen DOM, anda boleh menggunakan $refs untuk mengakses nod DOM. this.$refs 访问引用。对于 DOM 元素,可以使用 $refs 访问 DOM 节点。

<code class="javascript">// 组件中
<template>
    <div ref="myDiv"></div>
</template>
<script>
export default {
    mounted() {
        console.log(this.$refs.myDiv); // 获取 myDiv DOM 节点
    }
}
</script>

// DOM 元素
<div ref="myDiv"></div>
<script>
console.log(document.myDiv); // 获取 myDiv DOM 节点
</script></code>
Salin selepas log masuk

2. 通过 querySelector

querySelector 方法可以根据 CSS 选择器获取 DOM 元素。

<code class="javascript">// 组件中
const myDiv = this.$el.querySelector('div');

// DOM 元素
const myDiv = document.querySelector('div');</code>
Salin selepas log masuk

3. 通过 getBoundingClientRect

getBoundingClientRect 方法返回一个包含 DOM 元素边界矩形信息的 DOMRect 对象。

<code class="javascript">// 组件中
const rect = this.$el.getBoundingClientRect();

// DOM 元素
const rect = document.myDiv.getBoundingClientRect();</code>
Salin selepas log masuk

4. 通过 event.target

当事件发生时,event.target

<code class="javascript">// 在事件处理函数中
const target = event.target;</code>
Salin selepas log masuk

2. Kaedah querySelector

🎜🎜querySelector boleh digunakan untuk mendapatkan elemen DOM berdasarkan pemilih CSS. 🎜rrreee🎜🎜3 Kembalikan objek DOMRect yang mengandungi maklumat segi empat tepat terikat bagi elemen DOM melalui kaedah getBoundingClientRect🎜🎜🎜getBoundingClientRect. 🎜rrreee🎜🎜4. Melalui event.target🎜🎜🎜Apabila peristiwa berlaku, sifat event.target mengandungi elemen DOM yang mencetuskan acara. 🎜rrreee🎜Bergantung pada situasi tertentu, anda boleh memilih kaedah yang paling sesuai untuk mendapatkan elemen DOM berdasarkan kaedah di atas. 🎜

Atas ialah kandungan terperinci Bagaimana untuk mendapatkan dom dalam vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan