Vue.Js Veränderung den Stil
Vue.JS wird verwendet, um Benutzeroberflächen (UIS) und einseitige Anwendungen (SPAs) zu erstellen. Es ist leicht zu lernen, wie man Vue benutzt.JS und der Rahmen von Freiheit und Komfort, der bei der Entwicklung von Anwendungen in diesem Programm verfügbar ist. Deshalb ist es für seine benutzerfreundliche 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 man die Stilbindung verwendet und das Styling von Variablen mit Vue verändert.JS.
Inline -Stilbindung
In Vue.JS können wir Variablen an Stilattribute mithilfe von V-Bind-Anweisungen binden.
Objektsyntax
Genau wie bei Inline CSS -Styling können wir auch Inline -Styling in Vue durchführen.JS Verwenden der Objektsyntax der V-Bind-Richtlinie und der Curly Braces. Sie können jede Variable mit dem folgenden Skript an das Style -Attribut binden:
Und im Skript -Tag und in den Daten:
an einer()zurückkehren
Colorvar: 'Rot',
Schriftgröße: 14
Wir können das Objekt auch auf die Daten bringen und dieses Objekt an das Style -Attribut binden, damit unser HTML wie folgt sauberer aussieht:
Daten()zurückkehren
styleObject:
Colorvar: 'Rot',
Schriftgröße: 14
Jetzt werden wir die Variable „StyleObject“ an das Style -Attribut wie folgt binden:
Array -Syntax
Vue.JS bietet auch die Option, mehrere Variablen in die Array -Syntax an das einzelne HTML -Tag zu binden, wie folgt:
Mehrere Werte
In ähnlicher Weise können wir auch mehrere Werte unter Verwendung der Array -Syntax für eine CSS -Eigenschaft innerhalb der Inline -Bindung wie folgt angeben:
Dies sind einige der unterschiedlichen Möglichkeiten, mit denen wir Variablen mit dem Style -Attribut verbinden können, um das Styling einer Webseite dynamisch zu ändern.
Zusammenfassung
Dieser Artikel behandelte die Syntax für das Bindungs -Inline -Styling. Sie haben auch die Objektsyntax und die Array -Syntax erfahren, mit der die Werte oder Variablen an Style -Attribute in VUE gebunden sind.JS. Wenn sich dieser Artikel als hilfreich erwies, um Ihnen ein besseres Verständnis für VUE zu verleihen.JS, zögern Sie nicht, weiter unter LinuxHint zu lesen.com für nützlichere Inhalte.