Vue.JS jest bardzo imponującym i reaktywnym front-end ramy JavaScript używane do szybkiego i łatwego opracowywania witryn z front-end. Ten post dowie się o nieruchomości zegarka, która jest jedną z najbardziej podstawowych koncepcji.

Vue.JS zapewnia właściwość Watch do obejrzenia zmiennej, a po zmianie tej zmiennej pozwala nam uruchomić funkcję, abyśmy mogli dokonać dynamicznej interakcji. Wypróbujmy przykład i zorganizuj dynamiczną interakcję za pomocą właściwości Vue Watch.

Przykład

Najpierw postaramy się zmienić zmienną za kliknięciem przycisku, a następnie za pomocą właściwości Watch obejrzymy tę zmienną i zmienimy inne zmienne, aby wprowadzić dynamiczne zmiany na stronie internetowej.

Po pierwsze, załóżmy, że mamy dwie zmienne.
dane()
powrót
Buttonbool: True,
kolor czerwony"

I wiązaliśmy zmienną „Buttonbool” z elementem przycisku w szablonie.

Chcemy zmienić kolor tła A, powiedzmy, podział na kliknięcie przycisku. Najpierw utwórz div w szablonie.

To jest strona testowa

Kliknij!

Teraz najpierw utwórzmy właściwość Watch i zmienimy stan zmiennej „kolor” po zmianie zmiennej „Buttonbool”.

oglądać:
ButtonBool ()
Ten.kolor = !Ten.kolor;

W porządku! Ostatnim krokiem jest zmiana klas Div po zmianie zmiennej kolorystycznej. Zróbmy to za pomocą funkcji wiązania klasy Vue.JS.

Tutaj właśnie przypisałem klasę „czerwony”, jeśli stan zmiennej „kolor” jest prawdziwy, w przeciwnym razie „zielony”, jeśli stan zmiennej kolorów jest „fałszywy”, a klasa „pudełka” jest w każdym przypadku przypisywana.

CSS do przekazywania szerokości, wysokości i koloru tła Div jest następujący.

W porządku, po zakończeniu kodowania, moja strona internetowa byłaby taka.

Teraz, ilekroć klikam przycisk, kolor tła pola powinien się zmienić.

I możesz być świadkiem w powyższym gifie, kolor div zmienia się za kliknięciem przycisku. To niesamowite, prawda!

W ten sposób możemy użyć zegarka Vue, aby dokonać dynamicznej interakcji na stronie internetowej.

Wniosek

W tym poście próbowaliśmy zmienić stan zmiennej przy kliknięciu lub zmianie innej zmiennej za pomocą właściwości zegarka Vue.JS. Wprowadziliśmy również pewne dynamiczne zmiany na stronie internetowej. Widzieliśmy, że przy kliknięciu przycisku, w atrybucie na kliknięciu, zmieniliśmy stan zmiennej i pokazaliśmy, że właściwość obserwowała zmienną i wykonała pewne działania, takie jak zmiana innego stanu zmiennej.