Vue.js
Propiedades calculadas

Observaciones

Ejemplo básico

Modelo

<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
    }
  }
})

Resultado

a=1, b=2

Aquí hemos declarado una propiedad computada b . La función que proporcionamos se utilizará como la función getter para la propiedad vm.b :

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

El valor de vm.b siempre depende del valor de vm.a

Puede enlazar datos a propiedades computadas en plantillas como una propiedad normal. Vue es consciente de que vm.b depende de vm.a , por lo que actualizará todos los enlaces que dependan de vm.b cuando vm.a cambie.

Propiedades calculadas vs reloj

modelo

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

ver ejemplo

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
})

Ejemplo calculado

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

Setters computados

Las propiedades calculadas se volverán a calcular automáticamente cada vez que se modifique cualquier dato del que dependan los cálculos. Sin embargo, si necesita cambiar manualmente una propiedad computada, Vue le permite crear un método de establecimiento para hacer esto:

Plantilla (del ejemplo básico anterior):

<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 
      }
    }
  }

Ahora puedes invocar el getter o el setter:

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

vm.b = 4 invocará el setter, y configurará this.a en 3; por extensión, vm.b evaluará a 4.

Usando setters computados para v-model

Es posible que necesite un v-model en una propiedad computada. Normalmente, el modelo v no actualizará el valor de la propiedad computada.

La plantilla:

<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>

Estilo:

#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;
}

El componente:

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

Fiddle Aquí verás, al hacer clic en el botón de radio no tiene ningún uso, tu estado aún está en línea.

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

violín Y ahora puede ver el cambio cuando la casilla de verificación está activada / desactivada.