Vue.JS ist ein sehr beeindruckender und reaktives Front-End-Framework von JavaScript, mit dem Front-End-Websites schnell und einfach entwickelt werden. Dieser Beitrag wird sich über die Watch -Immobilie kennenlernen, die eines der grundlegendsten Konzepte ist.

Vue.JS bietet eine Watch -Eigenschaft, um eine Variable zu beobachten, und ermöglicht es uns, eine Funktion auszuführen, damit wir dynamische Interaktion durchführen können. Probieren wir ein Beispiel aus und haben eine dynamische Interaktion mithilfe der Vue Watch -Eigenschaft.

Beispiel

Wir werden zunächst versuchen, eine Variable beim Klicken einer Schaltfläche zu ändern und dann mit der Watch -Eigenschaft diese Variable zu beobachten und eine andere Variable zu ändern, um die dynamischen Änderungen auf der Webseite vorzunehmen.

Angenommen, wir haben zwei Variablen.
Daten()
zurückkehren
ButtonBool: True,
Farbe Rot"

Und wir haben die Variable „ButtonBool“ mit einem Tastenelement in der Vorlage gebunden.

Wir möchten die Hintergrundfarbe von A ändern. Erstellen Sie also zunächst eine DIV in der Vorlage.

Dies ist eine Testseite

Klick mich!

Erstellen wir zunächst zuerst eine Uhreneigenschaft und ändern Sie den Status der Variablen „Farbe“ bei der Änderung der Variablen „ButtonBool“.

betrachten:
buttonbool ()
Das.Farbe = !Das.Farbe;

In Ordnung! Der letzte Schritt links ist, die Klassen des DIV auf der Änderung der Farbvariablen zu ändern. Lassen Sie uns dies tun, indem wir die Klassenbindungsfunktion von VUE verwenden.JS.

Hier habe ich gerade die Klasse „rot“ zugewiesen, wenn der Status der Variablen „Farbe“ wahr ist, sonst „grün“, wenn der Status der Farbvariablen „falsch“ ist und die „Box“ -Klasse in jedem Fall zugewiesen ist.

Das CSS für die Verleihung der Breite, der Höhe und der Hintergrundfarbe für die DIV ist wie folgt.

Okay, nachdem ich mit den Codierungsmaterial fertig gemacht habe, wäre meine Webseite so.

Wenn ich nun auf die Schaltfläche klicke, sollte die Hintergrundfarbe des Feldes geändert werden.

Und Sie können im GIF oben beobachten. Das ist erstaunlich, richtig!

So können wir die Vue -Uhr verwenden, um die dynamische Interaktion auf der Webseite durchzuführen.

Abschluss

In diesem Beitrag haben wir versucht, den Status einer Variablen beim Klicken oder der Änderung einer anderen Variablen mithilfe der Watch -Eigenschaft von VUE zu ändern.JS. Wir haben auch einige dynamische Änderungen an der Webseite vorgenommen. Wir haben gesehen, dass wir beim Klicken auf die Schaltfläche im On-Klick-Attribut den Status der Variablen geändert und gezeigt haben.