Vue Watch, за да направите динамично взаимодействие

Vue.js е много впечатляваща и реактивна фронт-енд рамка на JavaScript, използвана за бързо и лесно разработване на уебсайтове с преден край. Тази публикация ще научи за свойството на часовника, което е една от най-фундаменталните концепции.

Vue.js предоставя свойство watch за гледане на променлива и при промяната на тази променлива ни позволява да стартираме функция, така че да можем да направим динамично взаимодействие. Нека изпробваме пример и имаме динамично взаимодействие, като използваме свойството Vue Watch.

Пример

Първо ще се опитаме да променим някаква променлива с едно щракване на бутон, а след това, като използваме свойството watch, ще наблюдаваме тази променлива и ще променим друга променлива, за да направим динамичните промени на уеб страницата.

Първо, приемете, че имаме две променливи.
данни()
връщане
buttonBool: вярно,
цвят: "червен"

И ние сме обвързали променливата “buttonBool” с елемент бутон в шаблона.

Искаме да променим цвета на фона на, да кажем, разделение с едно щракване на бутона. И така, първо създайте div в шаблона.

Сега, нека първо създадем свойство за наблюдение и променим състоянието на променливата “color” при промяната на променливата “buttonBool”.

гледам:
buttonBool ()
това.цвят = !това.цвят;

Добре! Последната стъпка е да промените класовете на div при промяната на цветовата променлива. Така че, нека направим това, като използваме функцията за свързване на класове на Vue.js.

Тук току-що съм присвоил клас „червен“, ако състоянието на променливата „цвят“ е вярно, иначе „зелено“, ако състоянието на променливата цвят е „невярно“ и класът „кутия“ е присвоен във всеки случай.

CSS за даване на ширината, височината и цвета на фона на div е както следва.

Добре, след като приключих с кодирането, уеб страницата ми щеше да е такава.

Сега, когато щракна върху бутона, цветът на фона на кутията трябва да се промени.

И можете да станете свидетели в gif по-горе, цветът на div се променя с едно щракване на бутона. Това е невероятно, нали!

И така, по този начин можем да използваме Vue Watch за динамично взаимодействие на уеб страницата.

Заключение

В тази публикация се опитахме да променим състоянието на дадена променлива при щракване или промяна на друга променлива, като използваме свойството watch на Vue.js. Направихме и някои динамични промени в уеб страницата. Видяхме, че при щракване на бутона, в атрибута on-click, сме променили състоянието на променливата и показахме, че свойството watch наблюдава променливата и извършва някои действия като промяна на състоянието на друга променлива.