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 类：
如果对象的键对应的值（isActive 和 isDisabled）为 true，则相应的 CSS 类（active 和 disabled）将被应用到元素上。
移除 CSS 类：
当对象的键对应的值为 false 时，相应的 CSS 类将从元素中移除。
多个 CSS 类：
可以通过使用空格将多个 CSS 类指定为对象键：
<code><div :class="{ 'class-1': condition1, 'class-2': condition2 }"></div></code>注意：
class 属性中的值必须是一个对象。true 或 false
class Der Wert des Attributs ist ein Objekt, wobei: 🎜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. 🎜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!
