Bincangkan beberapa kaedah untuk mendapatkan elemen DOM dalam Vue-Soal Jawab bahagian hadapan-php.cn

Bincangkan beberapa kaedah untuk mendapatkan elemen DOM dalam Vue

PHPz

Lepaskan： 2023-04-07 10:05:32

asal

6215 orang telah melayarinya

Vue ialah rangka kerja JavaScript popular yang membolehkan pembangun membina aplikasi web interaktif dengan mudah. Salah satu keperluan biasa ialah mendapatkan elemen DOM dalam komponen Vue supaya ia boleh dimanipulasi. Walau bagaimanapun, Vue mempunyai beberapa cara khas untuk mendapatkan elemen DOM. Dalam artikel ini, kami akan meneroka beberapa kaedah untuk mendapatkan elemen DOM dalam Vue.

1 Dapatkan elemen melalui $refs

$refs dalam Vue ialah objek khas yang menyediakan rujukan untuk semua elemen DOM dalam komponen. Dalam komponen Vue, anda boleh menamakan elemen melalui atribut ref, dan kemudian menggunakan objek $refs untuk mengakses elemen. Berikut ialah contoh:

<template>
  <div>
    <input type="text" ref="myInput">
    <button @click="handleClick">获取输入框的值</button>
  </div>
</template>

<script>
export default {
  methods: {
    handleClick() {
      console.log(this.$refs.myInput.value);
    },
  },
};
</script>

Salin selepas log masuk

Dalam contoh di atas, kami menambahkan atribut ref pada kotak input dan menetapkannya kepada myInput. Kita boleh mengakses elemen ini menggunakan ini.$refs.myInput. Dalam kaedah handleClick, kami mendapat nilai kotak input dan mencetaknya ke konsol.

2 Dapatkan elemen melalui parameter acara $event

Apabila memproses acara DOM, komponen Vue menyediakan parameter acara khas $event, yang mengandungi semua maklumat tentang acara, termasuk semasa. peristiwa Elemen sasaran (sasaran).

<template>
  <div>
    <input type="text" @blur="handleBlur">
  </div>
</template>

<script>
export default {
  methods: {
    handleBlur(event) {
      console.log(event.target.value);
    },
  },
};
</script>

Salin selepas log masuk

Dalam contoh di atas, kami menambahkan pendengar acara @blur dan mengikatnya pada kaedah handleBlur. Apabila kotak input kehilangan fokus, kaedah handleBlur dicetuskan. Kaedah ini menerima peristiwa parameter peristiwa dan menggunakan event.target.value untuk mendapatkan nilai kotak input.

3. Gunakan perpustakaan pihak ketiga

Selain kaedah yang disediakan oleh Vue, anda juga boleh menggunakan perpustakaan pihak ketiga untuk mendapatkan elemen DOM. jQuery ialah perpustakaan JavaScript popular yang memudahkan untuk mendapatkan dan memanipulasi elemen DOM. Anda boleh menambah jQuery pada komponen Vue dan kemudian menggunakan pemilih jQuery untuk mengakses elemen.

<template>
  <div ref="myDiv">
    <p>Hello World!</p>
  </div>
</template>

<script>
import $ from "jquery";

export default {
  mounted() {
    const myDiv = $(this.$refs.myDiv);
    const p = myDiv.find("p");
    console.log(p.text());
  },
};
</script>

Salin selepas log masuk

Dalam contoh di atas, kami menambahkan atribut ref pada elemen

Kami kemudian menggunakan pemilih jQuery dalam fungsi cangkuk mounted() untuk mengakses elemen dan anak-anaknya. Akhir sekali, kami menggunakan p.text() untuk mendapatkan kandungan teks dalam elemen

Ringkasnya, Vue menyediakan pelbagai kaedah untuk mendapatkan elemen DOM, daripada $refs mudah kepada pemilih jQuery yang berkuasa. Pembangun boleh memilih kaedah terbaik untuk aplikasi mereka.

Atas ialah kandungan terperinci Bincangkan beberapa kaedah untuk mendapatkan elemen DOM dalam Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!