Rumah > Artikel > hujung hadapan web > 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 ? 'bold' : ''"> <!-- <div class> --> <!-- ✅ --> <div :class="isBold ? 'bold' : null"> <!-- <div> -->
''
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 ? 'bold' : ''"></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>
null
Seterusnya, mari lihat jika kita menetapkan nilai kepada kelas sebagai null
Apa yang berlaku.
html
<div :class="isBold ? 'bold' : 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>
Sebenarnya, undefined
juga boleh berfungsi seperti biasa
<div :class="isBold ? 'bold' : undefined"></div>
<div></div> <!-- Nice, no empty class -->
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)
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 ? 'underline bold' : null"></div>
&&
Mari lihat senario lain untuk melihat sama ada ia berfungsi.
<div :class="isBold && 'bold'"></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.
isBold
sama dengan false
<div :class="isBold && 'bold'"></div>
Ini masih akan menjadikan kelas kosong
<div class></div>
isBold
sama dengan null
<div :class="isBold && 'bold'"></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.
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 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.
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!