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

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

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

Пример

<html>
 <head>
 <title>VueJs Instance</title>
 <script type = "text/javascript" src = "js/vue.js"></script>
 </head>
 <body>
 <div id = "computed_props">
 Kilometers : <input type = "text" v-model = "kilometers">
 Meters : <input type = "text" v-model = "meters">
 </div>
 <script type = "text/javascript">
 var vm = new Vue({
 el: '#computed_props',
 data: {
 kilometers : 0,
 meters:0
 },
 methods: {
 },
 computed :{
 },
 watch : {
 kilometers:function(val) {
 this.kilometers = val;
 this.meters = val * 1000;
 },
 meters : function (val) {
 this.kilometers = val/ 1000;
 this.meters = val;
 }
 }
 });
 </script>
 </body>
</html>

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

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

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

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

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

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

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

Источник: 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> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree