Vue.js
Вычислимые свойства

замечания

Основной пример

шаблон

<div id="example">
  a={{ a }}, b={{ b }}
</div>

JavaScript

var vm = new Vue({
  el: '#example',
  data: {
    a: 1
  },
  computed: {
    // a computed getter
    b: function () {
      // `this` points to the vm instance
      return this.a + 1
    }
  }
})

Результат

a=1, b=2

Здесь мы объявили вычисленное свойство b . Функция, которую мы предоставили, будет использоваться в качестве функции геттера для свойства vm.b :

console.log(vm.b) // -> 2
vm.a = 2
console.log(vm.b) // -> 3

Значение vm.b всегда зависит от значения vm.a

Вы можете привязать данные к вычисленным свойствам в шаблонах так же, как и нормальное свойство. Vue знает, что vm.b зависит от vm.a , поэтому он будет обновлять любые привязки, зависящие от vm.b при изменении vm.a

Вычислительные свойства против часов

шаблон

<div id="demo">{{fullName}}</div>

пример просмотра

var vm = new Vue({
  el: '#demo',
  data: {
    firstName: 'Foo',
    lastName: 'Bar',
    fullName: 'Foo Bar'
  }
})

vm.$watch('firstName', function (val) {
  this.fullName = val + ' ' + this.lastName
})

vm.$watch('lastName', function (val) {
  this.fullName = this.firstName + ' ' + val
})

Вычисленный пример

var vm = new Vue({
  el: '#demo',
  data: {
    firstName: 'Foo',
    lastName: 'Bar'
  },
  computed: {
    fullName: function () {
      return this.firstName + ' ' + this.lastName
    }
  }
})

Вычислительные сеттеры

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

Шаблон (из основного примера выше):

<div id="example">
  a={{ a }}, b={{ b }}
</div>

Javascript:

var vm = new Vue({
  el: '#example',
  data: {
    a: 1
  },
  computed: {
    b: {
      // getter
      get: function () {
        return this.a + 1
      },
      // setter
      set: function (newValue) {
        this.a = newValue - 1 
      }
    }
  }

Теперь вы можете вызвать либо геттер, либо сеттер:

console.log(vm.b)       // -> 2
vm.b = 4                // (setter) 
console.log(vm.b)       // -> 4
console.log(vm.a)       // -> 3

vm.b = 4 будет вызывать установщик и установить this.a в 3; по расширению, vm.b будет оцениваться до 4.

Использование вычисленных сеттеров для v-модели

Возможно, вам понадобится v-model для вычисленного свойства. Как правило, v-модель не будет обновлять значение вычисленного значения.

Шаблон:

<div id="demo">
  <div class='inline-block card'>
    <div :class='{onlineMarker: true, online: status, offline: !status}'></div>  
    <p class='user-state'>User is {{ (status) ? 'online' : 'offline' }}</p>
  </div>

  <div class='margin-5'>
    <input type='checkbox' v-model='status'>Toggle status (This will show you as offline to others)
  </div>
</div>

Стайлинг:

#demo {
  font-family: Helvetica;
  font-size: 12px;
}
.inline-block > * {
  display: inline-block;
}
.card {
  background: #ddd;
  padding:2px 10px;
  border-radius: 3px;
}
.onlineMarker {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  transition: all 0.5s ease-out;
}

.online {
  background-color: #3C3;
}

.offline {
  background-color: #aaa;
}

.user-state {
  text-transform: uppercase;
  letter-spacing: 1px;
}

.margin-5 {
  margin: 5px;
}

Компонент:

var demo = new Vue({
    el: '#demo',
    data: {
        statusProxy: null
    },
    computed: {
        status: {
            get () {
                return (this.statusProxy === null) ? true : this.statusProxy     
            }
        }
    }
})

скрипка. Здесь вы увидите, что щелчок по кнопке не имеет никакого значения, ваш статус по-прежнему в сети.

var demo = new Vue({
    el: '#demo',
    data: {
        statusProxy: null
    },
    computed: {
        status: {
            get () {
                return (this.statusProxy === null) ? true : this.statusProxy     
            },
            set (val) {
                this.statusProxy = val            
            }
        }
    }
})

fiddle И теперь вы можете видеть, что переключатель происходит, когда флажок установлен / снят флажок.