Phenquestions
Vue.js wird verwendet, um Benutzeroberflächen (UIs) und Single-Page-Anwendungen (SPAs) zu erstellen. Es ist leicht zu lernen, wie man Vue . verwendet.js und den Freiheits- und Komfortrahmen, der bei der Entwicklung von Anwendungen in diesem Programm verfügbar ist, da es die am besten kombinierten Funktionen von Angular und ReactJS bietet. Deshalb ist es für seine einfach zu bedienende und saubere Codierung bekannt.
Vue.js bietet eine Stilbindung, mit der Sie den Stil dynamisch ändern können. Sie können eine Variable an das style-Attribut in jedem HTML-Tag binden und den Stil ändern, wenn die gebundene Variable geändert wird. In diesem Artikel werden wir uns ansehen, wie Sie die Stilbindung verwenden und das Styling von Variablen mit vue . ändern.js.
Bindung im Inline-Stil
Im Vue.js können wir Variablen mithilfe von v-bind-Direktiven an Stilattribute binden.
Objektsyntax
Genau wie beim Inline-CSS-Styling können wir auch Inline-Styling in Vue . durchführen.js mit der v-bind-Direktive und der Objektsyntax mit geschweiften Klammern. Sie können jede Variable mit dem folgenden Skript an das style-Attribut binden:
Und im Skript-Tag und in den Daten:
an einer()Rückkehr
colorVar: 'rot',
Schriftgröße: 14
Wir können das Objekt auch in die Daten aufnehmen und dieses Objekt mit dem style-Attribut binden, damit unser HTML wie folgt sauberer aussieht:
Daten()Rückkehr
styleObject:
colorVar: 'rot',
Schriftgröße: 14
Nun binden wir die Variable „styleObject“ wie folgt an das style-Attribut:
Array-Syntax
Vue.js bietet auch die Möglichkeit, mehrere Variablen in Array-Syntax wie folgt an das einzelne HTML-Tag zu binden:
Mehrere Werte
Auf ähnliche Weise können wir einer CSS-Eigenschaft innerhalb der Inline-Bindung mehrere Werte mithilfe der Array-Syntax wie folgt zuweisen:
Dies sind einige der verschiedenen Möglichkeiten, die wir zum Binden von Variablen mit dem style-Attribut verwenden können, um das Design einer Webseite dynamisch zu ändern.
Zusammenfassung
In diesem Artikel wurde die Syntax zum Binden von Inline-Styling behandelt. Sie haben auch die Objekt- und Array-Syntax kennengelernt, die verwendet wird, um die Werte oder Variablen an Stilattribute in vue zu binden.js. Wenn sich dieser Artikel als hilfreich erwiesen hat, um Ihnen ein besseres Verständnis von vue zu vermitteln.js, lesen Sie gerne weiter unter linuxhint.com für weitere nützliche Inhalte.
