Eine häufige Voraussetzung für die Datenbindung ist die Klassenliste der Operationselemente und dessen Inline -Stil. Da es sich um alle Attribute handelt, können wir sie mit V-BIND verarbeiten: Berechnen Sie einfach die endgültige Zeichenfolge des Ausdrucks. String -Spleißen ist jedoch problematisch und leicht Fehler zu machen. Daher verbessert 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.
Binden Sie die HTML -Klasse
Obwohl Sie das Schnurrbart-Tag verwenden können, um die Klasse zu binden, z. Nur einer der beiden kann ausgewählt werden!
Objektsyntax
Wir können ein Objekt an V-Bind: Klasse übergeben, um die Klasse dynamisch zu wechseln. Beachten Sie, dass die V-BIND: 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 "statischer Klasse-A-Klasse-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: Klasse ü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.
Das Schreiben auf diese Weise ist jedoch etwas umständlich, wenn es mehrere bedingte Klassen gibt. In 1.0.19+ kann die Objektsyntax in der Array -Syntax verwendet werden:
<div v-bind: class = "[classa, {classb: isb, classc: isc}]">
Binden Sie Inline -Stile
Objektsyntax
Die Objektsyntax von V -Bind: Stil 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.
Array -Syntax
V-BIND: Die Array-Syntax von 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.
Dieser Artikel wurde in das Tutorial "Vue.js Front-End-Komponenten Learning" zusammengestellt, und jeder kann gerne lernen und lesen.
Für Tutorials zu Vue.js -Komponenten klicken Sie bitte auf das spezielle Thema VUE.JS -Komponenten -Lern -Tutorial zum Erlernen.
Weitere Vue Learning -Tutorials finden Sie im speziellen Thema "Vue Practical Tutorial".
Das obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, es wird für das Lernen aller hilfreich sein und ich hoffe, jeder wird Wulin.com mehr unterstützen.