Vue.js
Berechnete Eigenschaften

Bemerkungen

Basisbeispiel

Vorlage

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

Ergebnis

a=1, b=2

Hier haben wir eine berechnete Eigenschaft b . Die von uns bereitgestellte Funktion wird als Getter-Funktion für die Eigenschaft vm.b :

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

Der Wert von vm.b hängt immer vom Wert von vm.a .

Sie können an berechnete Eigenschaften in Vorlagen genau wie eine normale Eigenschaft Datenbinden. Vue ist sich bewusst, dass vm.b von vm.b abhängt. vm.a werden alle Bindungen aktualisiert, die von vm.b wenn sich vm.a ändert.

Berechnete Eigenschaften vs. Watch

Vorlage

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

Beispiel ansehen

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

Berechnetes Beispiel

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

Berechnete Setter

Berechnete Eigenschaften werden automatisch neu berechnet, wenn sich Daten ändern, von denen die Berechnung abhängt. Wenn Sie jedoch eine berechnete Eigenschaft manuell ändern müssen, können Sie in Vue dazu eine Setter-Methode erstellen:

Vorlage (aus dem Grundbeispiel oben):

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

Sie können jetzt entweder den Getter oder den Setter aufrufen:

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

vm.b = 4 den Setter auf und setzt dies.a auf 3; Durch die Erweiterung wird vm.b mit 4 ausgewertet.

Berechnete Setter für v-Modell verwenden

Sie benötigen möglicherweise ein v-model für eine berechnete Eigenschaft. Normalerweise aktualisiert das V-Modell den berechneten Eigenschaftswert nicht.

Die Vorlage:

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

Styling:

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

Die Komponente:

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

Geige Hier würden Sie sehen, wenn Sie auf das Optionsfeld klicken, hat dies keinerlei Verwendung. Ihr Status ist noch online.

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

Geige Und jetzt können Sie sehen, wie das Umschalten geschieht, wenn das Kontrollkästchen aktiviert / deaktiviert ist.