Zegarek Vue do dynamicznej interakcji

Vue.js to bardzo imponujący i reaktywny framework front-endowy JavaScript używany do szybkiego i łatwego tworzenia front-endowych stron internetowych. W tym poście dowiesz się o właściwości zegarka, która jest jednym z najbardziej podstawowych pojęć.

Vue.js zapewnia właściwość watch do obserwacji zmiennej, a po zmianie tej zmiennej pozwala nam na uruchomienie funkcji, dzięki czemu możemy wykonać dynamiczną interakcję. Wypróbujmy przykład i przeprowadźmy dynamiczną interakcję za pomocą właściwości Vue Watch.

Przykład

Najpierw spróbujemy zmienić jakąś zmienną jednym kliknięciem przycisku, a następnie za pomocą właściwości watch będziemy obserwować tę zmienną i zmieniać inną zmienną, aby dokonać dynamicznych zmian na stronie internetowej.

Najpierw załóżmy, że mamy dwie zmienne.
dane ()
powrót
buttonBool: prawda,
kolor czerwony"

I powiązaliśmy zmienną „buttonBool” z elementem przycisku w szablonie.

Chcemy zmienić kolor tła, powiedzmy, podziału jednym kliknięciem przycisku. Więc najpierw utwórz div w szablonie.

Teraz utwórzmy najpierw właściwość watch i zmień stan zmiennej „color” przy zmianie zmiennej „buttonBool”.

zegarek:
buttonBool()
to.kolor = !to.kolor;

W porządku! Ostatnim krokiem po lewej stronie jest zmiana klas div na zmianę zmiennej koloru. Zróbmy to, korzystając z funkcji wiązania klas 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 koloru jest „fałsz”, a klasa „pudełko” jest przypisana w każdym przypadku.

CSS określający szerokość, wysokość i kolor tła div jest następujący.

W porządku, po skończeniu z kodowaniem moja strona internetowa wyglądałaby tak.

Teraz za każdym razem, gdy kliknę przycisk, kolor tła pola powinien się zmienić.

Jak widać na powyższym gifie, kolor div zmienia się jednym kliknięciem. To niesamowite, prawda!

W ten sposób możemy wykorzystać Vue Watch do dynamicznej interakcji na stronie.

Wniosek

W tym poście próbowaliśmy zmienić stan jakiejś zmiennej po kliknięciu lub zmienić inną zmienną za pomocą właściwości watch Vue.js. Wprowadziliśmy również kilka dynamicznych zmian na stronie internetowej. Widzieliśmy, że po kliknięciu przycisku w atrybucie on-click zmieniliśmy stan zmiennej i pokazaliśmy, że właściwość watch obserwowała zmienną i wykonywała jakąś akcję, na przykład zmianę stanu innej zmiennej.