От автора: в данном разделе мы рассмотрим свойство 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 контролирует обновление текстовых полей и выполняет расчёты в соответствующих функциях. Давайте посмотрим на результат в браузере.
Теперь можно добавить некоторые значения в поле для километров и посмотреть, как изменится поле для метров, и наоборот.
А теперь давайте введём значение в поле для метров и увидим, как изменится поле километров. Результат показан на скриншоте ниже.
Источник: https://www.tutorialspoint.com/
Редакция: Команда webformyself.