So verwenden Sie Klassen in Vue

Die Class-Eigenschaft in Vue.js ermöglicht das dynamische Hinzufügen oder Entfernen von CSS-Klassen. Ihr Wert ist ein Objekt, der Schlüssel ist der CSS-Klassenname und der Wert ist ein boolescher Wert. Wenn der dem Schlüssel entsprechende Wert wahr ist, wird die entsprechende CSS-Klasse auf das Element angewendet. Wenn der dem Schlüssel entsprechende Wert falsch ist, wird die entsprechende CSS-Klasse aus dem Element entfernt. Mehrere CSS-Klassen können mit Leerzeichen angegeben werden.

Class-Attribut in Vue.js

Was ist das Class-Attribut?

Das Attribut class in Vue.js ermöglicht das dynamische Hinzufügen oder Entfernen von CSS-Klassen zu HTML-Elementen. 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

• Der Schlüssel ist der CSS-Klassenname 🎜Der Wert ist ein boolescher Wert, der angibt, ob die Klasse gilt. 🎜🎜🎜🎜CSS-Klasse für dynamische Anwendungen: 🎜🎜🎜Wenn der Wert dem Schlüssel des Objekts entspricht (isActive und isDisabled) true ist, werden die entsprechenden CSS-Klassen (active und disabled) auf das Element angewendet. 🎜🎜🎜CSS-Klassen entfernen: 🎜🎜🎜Wenn der dem Schlüssel des Objekts entsprechende Wert false ist, wird die entsprechende CSS-Klasse aus dem Element entfernt. 🎜🎜🎜Mehrere CSS-Klassen: 🎜🎜🎜Mehrere CSS-Klassen können als Objektschlüssel angegeben werden, indem Leerzeichen verwendet werden: 🎜rrreee🎜🎜Hinweis: 🎜🎜
  • class im Attribut Wert muss sein ein Objekt sein. 🎜
  • CSS-Klassennamen müssen als Zeichenfolgen dargestellt werden, die in einfache oder doppelte Anführungszeichen eingeschlossen sind. 🎜
  • Der boolesche Wert muss true oder false sein. 🎜🎜

Das obige ist der detaillierte Inhalt vonSo verwenden Sie Klassen in Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!