Mari kita bincangkan tentang cara mengelakkan kelas kosong apabila kelas mengikat secara dinamik dalam Vue!

Bagaimana untuk mengelakkan kelas kosong dalam kelas mengikat dinamik dalam

Vue? Artikel berikut akan memperkenalkan kepada anda cara mengelakkan kelas kosong apabila kelas mengikat secara dinamik dalam Vue. Saya harap ia akan membantu anda!

[Cadangan berkaitan: tutorial video vuejs]

Melalui rentetan kosong boleh menyebabkan kelas dalam output DOM menjadi batal . Dalam pengendali ternary, kami boleh mengembalikan "null", yang memastikan tiada kelas kosong dalam DOM

<!-- ❌ -->
<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 secara bersyarat menetapkan kelas yang sesuai berdasarkan sama ada isBold ialah true atau falsy. 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
  }
}

Pemarahan akhir:

<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 berfungsi dengan baik?

<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: isBoldSamafalse

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

Ini masih akan menyebabkan kelas kosong?

<div class></div>

Contoh B: isBoldSamanull

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

Memandangkan isBold adalah 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. Oleh kerana ini mudah terlepas, saya lebih suka pengendali ternary yang lebih eksplisit, atau hanya sintaks objek?

Adakah atribut kelas kosong salah?

Saya cuba menggunakan W3C Markup Validation Service untuk menyemak dan kedua-dua sintaks memang 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

(Perkongsian video pembelajaran: pembangunan bahagian hadapan web, Video pengaturcaraan asas)

Atas ialah kandungan terperinci Mari kita bincangkan tentang cara mengelakkan kelas kosong apabila kelas mengikat secara dinamik dalam Vue!. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!