Bagaimana untuk menyemak sama ada dom mempunyai nama kelas dalam vue (dua kaedah)

Dalam Vue, adalah keperluan biasa untuk menyemak sama ada DOM mempunyai nama kelas tertentu. Dua kaedah diperkenalkan di bawah untuk melaksanakan fungsi ini.

Kaedah 1: Gunakan $refs

Dalam Vue, anda boleh menggunakan atribut $refs untuk mendapatkan rujukan kepada elemen dalam komponen. Anda kemudiannya boleh menggunakan kaedah JavaScript asli classList.includes() untuk menentukan sama ada elemen DOM mempunyai nama kelas tertentu. Berikut ialah kod sampel:

<template>
  <div ref="myDiv" class="my-class"></div>
</template>

<script>
export default {
  mounted() {
    const myDiv = this.$refs.myDiv; //获取myDiv元素的引用
    if (myDiv.classList.includes('my-class')) { //判断是否有my-class类名
      console.log('myDiv has the class "my-class"');
    } else {
      console.log('myDiv does not have the class "my-class"');
    }
  }
};
</script>

Kaedah 2: Gunakan $el

Kaedah lain ialah menggunakan atribut $el komponen untuk mendapatkan elemen DOM komponen. Berikut ialah contoh kod:

<template>
  <div class="my-class"></div>
</template>

<script>
export default {
  mounted() {
    const myDiv = this.$el; //获取组件的DOM元素
    if (myDiv.classList.includes('my-class')) { //判断是否有my-class类名
      console.log('the component has the class "my-class"');
    } else {
      console.log('the component does not have the class "my-class"');
    }
  }
};
</script>

Ringkasan

Melalui $refs dan $el anda boleh menyemak dengan mudah sama ada DOM mempunyai nama kelas tertentu dalam Vue. Kedua-dua kaedah di atas boleh mencapai fungsi ini, dan kaedah khusus yang dipilih boleh ditentukan mengikut keperluan sebenar.

Atas ialah kandungan terperinci Bagaimana untuk menyemak sama ada dom mempunyai nama kelas dalam vue (dua kaedah). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!