Vue JS — Свойство Watch

Vue JS — Свойство Watch

От автора: в данном разделе мы рассмотрим свойство Watch. Давайте на пример узнаем, как можно использовать свойство Vue JS Watch.

Пример

В вышеприведённом коде мы создали два текстовых поля, одно с километрами, а другое с метрами. В свойстве data километры и метры инициализируются с 0. Здесь есть объект watch, созданный с двумя функциями kilometers и meters. В этих функциях выполняется преобразование километров в метры и метров в километры.

Фреймворк VUE JS: быстрый старт, первые результаты

Получите бесплатный курс и создайте веб-приложение на трендовой Frontend-технологии VUE JS с полного нуля

Узнать подробнее

Когда мы вводим значения в любое из текстовых полей, не зависимо от того, какое из них меняется, Watch обновляет оба поля. Нам не нужно специально присваивать события и ждать, чтобы они изменились, и делать лишнюю валидацию. Watch контролирует обновление текстовых полей и выполняет расчёты в соответствующих функциях. Давайте посмотрим на результат в браузере.

Теперь можно добавить некоторые значения в поле для километров и посмотреть, как изменится поле для метров, и наоборот.

А теперь давайте введём значение в поле для метров и увидим, как изменится поле километров. Результат показан на скриншоте ниже.

Источник: https://www.tutorialspoint.com/

Редакция: Команда webformyself.

VUE JS. Быстрый старт

Практический курс по созданию веб-приложения на VUE JS с полного нуля

Получить

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree