Cara menggunakan kelas dalam vue

Harta Kelas dalam Vue.js membenarkan menambah atau mengalih keluar kelas CSS secara dinamik Nilainya ialah objek, kuncinya ialah nama kelas CSS dan nilainya ialah nilai Boolean. Apabila nilai yang sepadan dengan kunci adalah benar, kelas CSS yang sepadan digunakan pada elemen apabila nilai yang sepadan dengan kunci adalah palsu, kelas CSS yang sepadan dialih keluar daripada elemen. Berbilang kelas CSS boleh ditentukan dengan ruang.

Atribut kelas dalam Vue.js

Apakah atribut Kelas?

Atribut class dalam Vue.js membenarkan menambah atau mengalih keluar kelas CSS pada elemen HTML secara dinamik. class 属性允许动态地添加或删除 HTML 元素上的 CSS 类。

用法：

<code><div :class="{ active: isActive, disabled: isDisabled }"></div></code>

结构：

class 属性的值是一个对象，其中：

• 键是 CSS 类名
• 值是布尔值，表示类是否应用

动态应用 CSS 类：

如果对象的键对应的值（isActive 和 isDisabled）为 true，则相应的 CSS 类（active 和 disabled）将被应用到元素上。

移除 CSS 类：

当对象的键对应的值为 false 时，相应的 CSS 类将从元素中移除。

多个 CSS 类：

可以通过使用空格将多个 CSS 类指定为对象键：

<code><div :class="{ 'class-1': condition1, 'class-2': condition2 }"></div></code>

注意：

• class 属性中的值必须是一个对象。
• CSS 类名必须用字符串表示，用单引号或双引号引起来。
• 布尔值必须是 true 或 false

Penggunaan: 🎜🎜rrreee🎜🎜 Struktur: 🎜🎜🎜kelas Nilai atribut ialah objek, di mana: 🎜

• Kuncinya ialah nama kelas CSS 🎜Nilai ialah nilai Boolean, menunjukkan sama ada kelas itu digunakan 🎜🎜🎜🎜Kelas CSS aplikasi dinamik: 🎜🎜🎜Jika nilai sepadan dengan kunci objek (isActive dan isdisabled) adalah true , kelas CSS yang sepadan (aktif dan disabled) akan digunakan pada elemen. 🎜🎜🎜Alih keluar kelas CSS: 🎜🎜🎜Apabila nilai yang sepadan dengan kunci objek adalah false, kelas CSS yang sepadan akan dialih keluar daripada elemen. 🎜🎜🎜Berbilang kelas CSS: 🎜🎜🎜Berbilang kelas CSS boleh ditentukan sebagai kunci objek dengan menggunakan ruang: 🎜rrreee🎜🎜Nota: 🎜🎜
  • class dalam atribut Nilai mesti menjadi objek. 🎜
  • Nama kelas CSS mesti diwakili sebagai rentetan, disertakan dalam petikan tunggal atau berganda. 🎜
  • Nilai Boolean mestilah true atau false. 🎜🎜

Atas ialah kandungan terperinci Cara menggunakan kelas dalam vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!