Bagaimana untuk mengelakkan kelas kosong apabila Vue mengikat kelas secara dinamik!

Bagaimana untuk mengelakkan kelas kosong dalam kelas terikat secara dinamik dalam Vue? Artikel berikut akan memperkenalkan kepada anda bagaimana untuk mengelakkan perangkap saya harap ia akan membantu anda.

Lepasi rentetan kosong, yang boleh mengakibatkan kelas kosong dalam output DOM. Dalam pengendali ternary, kita boleh mengembalikan "null", yang memastikan tiada kelas kosong dalam DOM. [Cadangan berkaitan: "Tutorial vue.js"]

<!-- ❌ -->
<div :class="isBold ? &#39;bold&#39; : &#39;&#39;">
<!-- <div class> -->

<!-- ✅ -->
<div :class="isBold ? &#39;bold&#39; : null">
<!-- <div> -->

Pilihan 1: Gunakan rentetan kosong ''

Kami menggunakan operator ternary mengikut isBold ialah true atau falsy untuk menetapkan kelas yang sesuai secara bersyarat. Dalam contoh di bawah, jika isBold ialah 真值, kelas ditetapkan kepada bold. Jika ia 虚值, ia akan mengembalikan rentetan kosong ''.

html

<div :class="isBold ? &#39;bold&#39; : &#39;&#39;"></div>

js

data() {
  return {
    isBold: false
  }
}

Perenderan akhir kelihatan seperti:

<div class></div>
<!-- 啊！ 空的class -->

Jika isBold ialah true, ia akan dipaparkan sebagai:

<div class="bold"></div>

Pilihan 2: Gunakan null

Seterusnya, mari lihat jika kita menetapkan nilai kepada kelas sebagai nullApa yang berlaku.

html

<div :class="isBold ? &#39;bold&#39; : null"></div>

js

data() {
  return {
    isBold: false
  }
}

Perenderan akhir kelihatan seperti:

<div></div>
<!-- Nice, 没有空的 class -->

Jika isBold ialah true, ia akan dipaparkan sebagai:

<div class="bold"></div>

Pilihan 3: Gunakan undefined

Sebenarnya, undefined juga boleh berfungsi seperti biasa

<div :class="isBold ? &#39;bold&#39; : undefined"></div>

<div></div>
<!-- Nice, no empty class -->

Nilai maya

Berikut ialah nilai maya dalam JS. Jadi jika isBold ialah mana-mana nilai ini, ia akan mengembalikan kes palsu pengendali ternary.

false
undefined
null
NaN
0
"" or '' or `` (empty string)

Memfaktorkan semula menggunakan sintaks objek

Untuk contoh di atas, adalah lebih baik untuk menggunakan sintaks objek:

<div :class="{ bold: isBold }"></div>

Versi yang lebih baik menggunakan operator ternary A senario yang baik ialah menyediakan berbilang kelas.

<div :class="isActive ? &#39;underline bold&#39; : null"></div>

Menggunakan kelas tetapan &&

Mari lihat senario lain untuk melihat sama ada ia berfungsi.

<div :class="isBold && &#39;bold&#39;"></div>

&& bukan sahaja pengendali logik, ia sebenarnya menghasilkan nilai. Oleh itu, jika isBold benar, kembalikan bold. Walau bagaimanapun, jika isBold adalah khayalan, nilai isBold dikembalikan.

menekankan perkara terakhir - ia akan mengembalikan nilai isBold. Jadi bergantung pada nilai isBold, masalah asal kita mempunyai kelas kosong masih wujud. Mari lihat beberapa contoh.

Contoh A: isBold sama dengan false

<div :class="isBold && &#39;bold&#39;"></div>

Ini masih akan menjadikan kelas kosong

<div class></div>

Contoh B: isBold sama dengan null

<div :class="isBold && &#39;bold&#39;"></div>

Memandangkan isBold ialah null, kelas kosong itu hilang.

<div></div>

&&Betul - sebenarnya, ia hanya menjalankan tugasnya. Cuma kita memerlukan nilai pulangan tertentu. Dalam aspek lain, kita tidak boleh membuat kelas kosong, kita mesti lulus null atau undefined. Mana-mana nilai palsu lain selain daripada kedua-dua ini tidak akan berfungsi. Memandangkan ini mudah terlepas, saya lebih suka pengendali ternary yang lebih eksplisit, atau hanya sintaks objek.

Adakah atribut kelas kosong salah?

Saya cuba menggunakan Perkhidmatan Pengesahan Penanda W3C untuk menyemak, dan kedua-dua sintaks sememangnya lulus.

<!-- Pass -->
<div class>...</div>

<!-- Pass -->
<div>...</div>

Menggali ke dalam Standard HTML: Standard HTML: Sintaks atribut kosong, yang nampaknya tidak membenarkan atribut kosong.

Tetapi...

Tetapi kesahihan ini tidak terpakai kepada id. Kerana id kosong dianggap tidak sah.

<!-- Fail -->
<div id>...</div>

<!-- Fail -->
<div id="">...</div>

<!-- Pass -->
<div id="name">...</div>

❌ Ralat: ID tidak boleh menjadi rentetan kosong.

Ringkasan

Memandangkan kelas kosong dianggap sah dan spec tidak membantahnya, semuanya terpulang kepada anda untuk memilih. Ia adalah pangkalan kod anda dan anda memutuskan perkara yang perlu dilakukan dengannya. Jika anda ingin memastikan output HTML anda bersih, anda boleh menghantar null kepada pengendali ternary Vue. Jika ia tidak penting untuk anda, lupakannya. Tiada jawapan yang betul di sini, semuanya bergantung pada pilihan anda

Alamat asal bahasa Inggeris: https://www.samanthaming.com/tidbits/96-vue-use-null-for-class/

Pengarang: Samantha Ming

Penterjemah: Front-end Xiaozhi

Untuk lebih banyak pengetahuan berkaitan pengaturcaraan, sila lawati: Pengenalan kepada Pengaturcaraan ! !

Atas ialah kandungan terperinci Bagaimana untuk mengelakkan kelas kosong apabila Vue mengikat kelas secara dinamik!. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!