Блог программиста

Цель: пассивный доход 100 тыс. руб. в мес.

Задачи:

  1. Разработка языка Cj
  2. ...
  3. ...


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

Подписывайтесь:
Cj - язык программирования

Новый язык программирования, для разработки сайтов и приложений, подробнее...


Спецификация:

  1. Комментарии
  2. Типы данных, переменные, функции
  3. ...

Vue.JS вычисляемые свойства и watch

Вычисляемые свойства в Vue.JS это очень просто! Рассмотрим на примере:

<div id="div1">
	<p>Начальное значение: {{ value }}</p>
	<p>Вычисляемое значение: {{ newValue }}</p>
</div>

var vm1 = new Vue({
    el: '#div1',
    data: {
        value: 1
    },
    computed: {
        newValue: function () {
           return this.value + 1;
        }
    }
});

Здесь newValue и есть вычисляемое свойство.

Важно знать: вычисляемые свойства кешируются и пересчитываются когда изменяются их зависимости.

Сеттеры вычисляемых свойств

По умолчанию вычисляемые свойства являются геттерами, но им можно указать и сеттер:

<div id="div2">
	<p>firstName = {{ firstName }}</p>
	<p>lastName = {{ lastName }}</p>
	<p>fullName = {{ fullName }}</p>
</div>

var vm2 = new Vue({
    el: '#div2',
    data: {
      firstName: 'Foo',
      lastName: 'Bar'
    },
    computed: {
        fullName: {
            // геттер:
            get: function () {
                return this.firstName + ' ' + this.lastName
            },
            // сеттер:
            set: function (newValue) {
                var names = newValue.split(' ')
                this.firstName = names[0]
                this.lastName = names[names.length - 1]
            }
        }
    }
});

Проверим в консоли vm2.fullName = 'Иван Иванов'. Он должен вызвать сеттер и присвоить vm.firstName и vm.lastName.

Методы-наблюдатели в Vue.JS

В большинстве случаев используют вычисляемые свойства. Но в некоторых случаях необходимы методы-наблюдатели. Для этого в Vue.JS есть директива watch. Рассмотрим на примере:

<div id = "computed_props">
	Километры: <input type = "text" v-model = "kilometers">
	Метры: <input type = "text" v-model = "meters">
</div>
	  
var vm3 = new Vue({
	el: '#computed_props',
	data: {
		kilometers : 0,
		meters:0
	},
	watch : {
		kilometers: function(val) {
			this.kilometers = val;
			this.meters = val * 1000;
        },
        meters: function (val) {
            this.kilometers = val / 1000;
            this.meters = val;
        }
	}
});

Итак, есть два текстовых поля: с километрами и метрами. Здесь есть объект watch, созданный с двумя функциями kilometers и meters, где выполняется преобразование километров в метры и метров в километры соответственно.

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


Отправить комментарий
Контакты
vk.com/sitev_ru
Skype: sitev.ru
E-mail: mike@sitev.ru
github.com/sitev

Рейтинг@Mail.ru

Besucherzahler
счетчик посещений