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 }"

示例

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

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

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

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

注意事项

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

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