In vue: penggunaan kelas

Atribut :class dalam Vue digunakan untuk menetapkan kelas CSS elemen secara dinamik Ia boleh menambah atau mengalih keluar kelas, tatasusunan kelas terikat atau objek berdasarkan syarat. Ia menerima objek, tatasusunan atau rentetan yang mengandungi nama kelas CSS sebagai nilai, hanya boleh digunakan pada elemen dengan atribut kelas dan tidak mengatasi kelas sedia ada.

Penggunaan :class dalam Vue

:atribut kelas

:class ialah sifat dalam Vue yang membenarkan menetapkan kelas CSS elemen secara dinamik. Ia menerima objek, tatasusunan atau rentetan yang mengandungi nama kelas CSS sebagai nilai.

Syntax

<code>:class="['class1', 'class2', { 'class3': true }]"</code>

Tujuan

: Atribut kelas digunakan terutamanya untuk menambah atau mengalih keluar kelas CSS secara dinamik berdasarkan data. Ia boleh melaksanakan fungsi berikut:

• Tambah atau alih keluar kelas berdasarkan syarat: :class="{ 'active': isVisible }":class="{ 'active': isVisible }"
• 根据数据值添加类：:class="['class-' + propValue]"
• 绑定类数组：:class="classArray"
• 绑定类对象：:class="{ 'class1': true, 'class2': false }"

示例

<div :class="{ 'active': isVisible, 'error': hasError }"></div>

上面的示例将根据 isVisible 和 hasError 的值动态地添加或移除 active 和 error 类。

<div :class="classArray"></div>

上面的示例将绑定一个类数组，该数组包含要添加到元素的类名称。

注意事项

• :class 属性只能应用于带有 class
Tambah kelas berdasarkan nilai data: : class= "['class-' + propValue]"
• Ikat tatasusunan kelas: :class="classArray"
• Ikat objek kelas: :class="{ ' class1': true, 'class2': false }"

🎜🎜🎜Contoh🎜🎜rrreee🎜Contoh di atas akan menjadi dinamik berdasarkan nilai isVisible dan hasError Tambah atau alih keluar kelas aktif dan error secara berasingan. 🎜rrreee🎜Contoh di atas akan mengikat tatasusunan kelas yang mengandungi nama kelas untuk ditambahkan pada elemen. 🎜🎜🎜Nota🎜🎜🎜🎜: Atribut kelas hanya boleh digunakan pada elemen dengan atribut class. Atribut 🎜🎜:class tidak mengatasi kelas elemen sedia ada, tetapi menambahkannya pada kelas sedia ada. 🎜🎜Jika nilai ialah boolean, nilai yang sepadan akan ditetapkan dalam objek kelas dengan nama kelas sebagai kunci. 🎜🎜

Atas ialah kandungan terperinci In vue: penggunaan kelas. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!