1. Vorwort
Ich glaube, jeder weiß, dass eine häufige Anforderung für die Datenbindung die Klassenliste der Betriebselemente und ihres Inline -Stils ist. Da es sich um alle Eigenschaften handelt, können wir sie mit v-bind umgehen: Wir müssen nur die endgültige Zeichenfolge des Ausdrucks berechnen. String -Spleißen ist jedoch problematisch und leicht Fehler zu machen. So erhöht Vue.js es speziell, wenn v-bind für Klasse und Stil verwendet wird. Der Ergebnistyp eines Ausdrucks kann zusätzlich zu einer Zeichenfolge ein Objekt oder ein Array sein.
2. Binden Sie die HTML -Klasse
Bitte beachten Sie: Obwohl Sie das Schnurrbart-Tag verwenden können, um die Klasse zu v-bind:class , wie class="{{ className }}" . Nur einer der beiden kann ausgewählt werden!
Objektsyntax
Wir können ein Objekt an v-bind:class übergeben, um die Klasse dynamisch zu wechseln. Beachten Sie, dass v-bind:class Klassenrichtlinie mit normalen Klassenfunktionen koexistieren kann:
<div v-bind: class = "{'class-a': isa, 'class-b': isb}"> </div> Daten: {ISA: TRUE, ISB: False}Gerendert als:
<div> </div>
Wenn sich ISA und ISB ändern, wird die Klassenliste entsprechend aktualisiert. Wenn ISB beispielsweise wahr wird, wird die Klassenliste zu " static class-a class-b ".
Sie können ein Objekt auch direkt in die Daten binden:
<div v-bind: class = "classObject"> </div>
Daten: {classObject: {'class-a': true, 'class-b': false}}Wir können auch eine berechnete Eigenschaft binden, die das Objekt hier zurückgibt. Dies ist ein häufig verwendeter und leistungsstarker Modus.
Array -Syntax
Wir können ein Array an v-bind:class übergeben, um eine Klassenliste anzuwenden:
<div v-bind: class = "[classa, classB]">
Daten: {classa: 'class-a', classB: 'class-b'}Gerendert als:
<div> </div>
Wenn Sie auch die Klasse in der Liste gemäß den Bedingungen wechseln möchten, können Sie einen ternären Ausdruck verwenden:
<div v-bind: class = "[classa, isb? classB: '']">
Dieses Beispiel fügt Classa immer hinzu, aber ClassB nur, wenn ISB wahr ist.
2. Binden Sie Inline -Stile
Objektsyntax
Die Objektsyntax von v-bind:style ist sehr intuitiv - sie sieht CSS sehr ähnlich aus, ist aber tatsächlich ein JavaScript -Objekt. CSS-Attributnamen können durch Kamelase oder kurze horizontale Trennung (Kebab-Case) benannt werden:
<div v-bind: style = "{color: activeColor, fontsize: fontsize + 'px'}"> </div> Daten: {activeColor: 'rot', fontsize: 30}Es ist normalerweise besser, sich direkt an ein Stilobjekt zu binden und die Vorlage klarer zu machen:
<div v-bind: style = "styleObject"> </div>
Daten: {styleObject: {color: 'rot', fontsize: '13px'}}In ähnlicher Weise wird die Objektsyntax häufig in Verbindung mit den berechneten Eigenschaften des zurückgegebenen Objekts verwendet.
3. Array -Syntax
v-bind:style kann mehrere Stilobjekte auf ein Element anwenden:
<div v-bind: style = "[styleObjecta, styleObjectb]">
Fügen Sie automatisch Präfixe hinzu
Wenn v-bind:style CSS-Attribute verwendet, die Anbieter-Präfixe erfordern, wie z. B. Transformation, erkennt Vue.js automatisch das entsprechende Präfix.
4. Zusammenfassung
Das obige ist der gesamte Inhalt von Vue.js -Bindungsklassen und Stilstilen, die für Sie zusammengestellt wurden. Der Artikel wird ausführlich eingeführt und hat einen bestimmten Referenz -Lernwert. Ich hoffe, es wird für alle hilfreich sein, Vue.js. Der Editor wird auch Informationen zu Vue.js nacheinander aktualisieren. Interessierte Freunde, bitte achten Sie weiterhin auf Wulin.com.