Vue Watch для динамического взаимодействия

Vue.js - это очень впечатляющая и реактивная интерфейсная среда JavaScript, используемая для быстрой и простой разработки интерфейсных веб-сайтов. В этом посте мы узнаем о свойстве часов, которое является одной из самых фундаментальных концепций.

Vue.js предоставляет свойство watch для наблюдения за переменной, и при изменении этой переменной он позволяет нам запускать функцию, чтобы мы могли сделать динамическое взаимодействие. Давайте попробуем пример и получим некоторое динамическое взаимодействие с помощью свойства Vue Watch.

Пример

Сначала мы попытаемся изменить некоторую переменную одним нажатием кнопки, а затем, используя свойство watch, мы будем наблюдать за этой переменной и изменять некоторую другую переменную, чтобы внести динамические изменения на веб-странице.

Сначала предположим, что у нас есть две переменные.
данные()
возвращаться
buttonBool: true,
красный цвет"

И мы связали переменную buttonBool с элементом кнопки в шаблоне.

Мы хотим изменить цвет фона, скажем, деления одним нажатием кнопки. Итак, сначала создайте div в шаблоне.

Теперь давайте сначала создадим свойство часов и изменим состояние переменной «цвет» при изменении переменной «buttonBool».

смотреть:
buttonBool ()
это.цвет = !это.цвет;

Хорошо! Остался последний шаг - изменить классы div при изменении цветовой переменной. Итак, давайте сделаем это, используя функцию привязки классов Vue.js.

Здесь я только что назначил класс «красный», если состояние переменной «цвет» истинно, иначе «зеленый», если состояние переменной цвета «ложно», и класс «короб» назначается в любом случае.

CSS для указания ширины, высоты и цвета фона для div выглядит следующим образом.

Хорошо, после того, как я закончу кодирование, моя веб-страница будет такой.

Теперь, когда я нажимаю кнопку, цвет фона поля должен изменяться.

И вы можете увидеть на гифке выше, что цвет div меняется при нажатии кнопки. Это потрясающе, правда!

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

Заключение

В этом посте мы попытались изменить состояние некоторой переменной при щелчке или изменении какой-либо другой переменной, используя свойство watch Vue.js. Мы также внесли некоторые динамические изменения в веб-страницу. Мы видели, что при нажатии кнопки в атрибуте on-click мы изменили состояние переменной и показали, что свойство watch отслеживает переменную и выполняет некоторые действия, такие как изменение состояния какой-либо другой переменной.