Предисловие
Вычисленные атрибуты используются для описания декларативного выражения, что значение зависит от других значений. Когда вы связываете данные с вычисленным свойством в шаблоне, VUE обновляет DOM, когда любое значение, от которого он зависит, приводит к изменению вычисленного свойства. Эта функция очень мощная, она может сделать ваш код более декларативным, управляемым данными и простым в обслуживании.
Выражения в шаблонах очень удобны, но на самом деле они используются только для простых операций.
Шаблон должен описать структуру представления. Поместить слишком много логики в шаблон сделает шаблон слишком тяжелым и трудным для поддержания.
Вот почему Vue.js ограничивает связи связывания с одним выражением,
Если требуется более одного выражения, следует использовать вычисленные свойства.
Давайте посмотрим на этот простой пример
<div id = "Пример"> a = {{a}}, b = {{b}} </div> var vm = new Vue ({// Причина для именования виртуальной реальности заключается в том, что это фактически виртуальная машина в mvvm el: '#Example', data: {a: 1}, вычисл. вернуть this.a + 1}}})Результат вывода:
a = 1, b = 2
Здесь мы объявляем вычисленную собственность б. Функция, которую мы предоставляем, будет использоваться в качестве Getter для собственности Vm.b.
Console.log (vm.b) // -> 2vm.a = 3console.log (vm.b) // -> 3
Вы можете связать вычисленные свойства в шаблоне, как вы связываете нормальное свойство. Vue знает, что VM.B зависит от VM.A, поэтому, когда Vm.A изменяется, привязки, которые зависят от VM.B, также будут обновлены. И самое лучшее, что мы создаем эту зависимость декларативно: добычи вычислимых свойств чисты и не имеют побочных эффектов, поэтому их также легко проверить и понимать.
Если вы хотите наблюдать за изменениями данных на экземплярах VUE, вы можете использовать метод, предоставленный vue.js $watch .
<div id = "demo"> {{fullname}} </div> var vm = new Vue ({data: {firstname: 'foo', lastname: 'bar', fullname: 'foo bar'}}) vm. $ watch ('firstname', function (val) {this.fullNam this.lastname}) vm. $ watch ('lastname', function (val) {this.fullname = this.firstname + '' + val}) Однако приведенный выше метод также может быть реализован с использованием computed :
var vm = new Vue ({data: {FirstName: 'foo', lastname: 'bar'}, compuled: {fullname: function () {return this.firstname + '' + this.lastname}}}) Проще писать таким образом? Нет ненужного дубликата кода? Чиновник также поощряет использование computed методов.
Когда я говорил о computed выше, было упомянуто, что этот метод предоставляет метод get по умолчанию. Так есть ли set метод?
// ... вычислить: {fullName: {// getter get: function () {return this.firstname + '' + this.lastname}, // setter set: function (newvalue) {var name = newvalue.split ('') this.firstname = names = [0] this.lastname = natie. Если мы позвоним vm.fullName = 'John Doe' , будет вызван setter . vm.firstName и vm.lastName также будут иметь соответствующие обновления. Этот метод иногда полезен.
Суммировать
Вышеуказанное все о вычислительных атрибутах Vue.js. Я надеюсь, что эта статья будет полезна всем. Редактор также обновит контент о vue.js один за другим. Заинтересованные друзья могут продолжать следить за Wulin.com.