In vue: Verwendung der Klasse

Das :class-Attribut in Vue wird verwendet, um die CSS-Klasse eines Elements dynamisch festzulegen. Es kann Klassen, gebundene Klassenarrays oder Objekte basierend auf Bedingungen hinzufügen oder entfernen. Es akzeptiert ein Objekt, ein Array oder einen String, der einen CSS-Klassennamen enthält, als Wert, kann nur auf Elemente mit einem Klassenattribut angewendet werden und überschreibt keine vorhandenen Klassen.

Verwendung von :class in Vue

:class-Attribut

:class ist eine Eigenschaft in Vue, die das dynamische Festlegen der CSS-Klasse eines Elements ermöglicht. Es akzeptiert ein Objekt, ein Array oder eine Zeichenfolge, die einen CSS-Klassennamen als Wert enthält.

Syntax

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

Zweck

: Das Klassenattribut wird hauptsächlich zum dynamischen Hinzufügen oder Entfernen von CSS-Klassen basierend auf Daten verwendet. Es kann die folgenden Funktionen implementieren:

• Klassen basierend auf Bedingungen hinzufügen oder entfernen: :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
Klassen basierend auf Datenwerten hinzufügen: : class= "['class-' + propValue]"
• Klassen-Array binden: :class="classArray"
• Klassenobjekt binden: :class="{ ' class1': true, 'class2': false }"

🎜🎜🎜Beispiel🎜🎜rrreee🎜Das obige Beispiel ist dynamisch und basiert auf den Werten von isVisible und hasError Fügen Sie die Klassen active und error unabhängig voneinander hinzu oder entfernen Sie sie. 🎜rrreee🎜Das obige Beispiel bindet ein Array von Klassen, die die Klassennamen enthalten, die dem Element hinzugefügt werden sollen. 🎜🎜🎜Hinweise🎜🎜🎜🎜: Das Klassenattribut kann nur auf Elemente mit dem Attribut class angewendet werden. Das 🎜🎜:class-Attribut überschreibt nicht die bestehende Klasse eines Elements, sondern fügt es der bestehenden Klasse hinzu. 🎜🎜Wenn der Wert ein boolescher Wert ist, wird der entsprechende Wert im Klassenobjekt mit dem Klassennamen als Schlüssel festgelegt. 🎜🎜

Das obige ist der detaillierte Inhalt vonIn vue: Verwendung der Klasse. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!