Vue.js
Propriétés calculées

Remarques

Exemple de base

Modèle

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

Résultat

a=1, b=2

Ici, nous avons déclaré une propriété calculée b . La fonction que nous avons fournie sera utilisée comme fonction getter pour la propriété vm.b :

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

La valeur de vm.b dépend toujours de la valeur de vm.a

Vous pouvez lier des données aux propriétés calculées dans des modèles, tout comme une propriété normale. Vue est conscient que vm.b dépend de vm.a , donc il mettra à jour toutes les liaisons qui dépendent de vm.b lorsque vm.a change.

Propriétés calculées contre montre

modèle

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

exemple de montre

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

Exemple calculé

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

Setters Calculés

Les propriétés calculées seront automatiquement recalculées à chaque modification des données sur lesquelles le calcul est effectué. Cependant, si vous devez modifier manuellement une propriété calculée, Vue vous permet de créer une méthode de réglage pour ce faire:

Template (de l'exemple de base ci-dessus):

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

Vous pouvez maintenant appeler le getter ou le setter:

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

vm.b = 4 invoquera le setter et définira this.a à 3; par extension, vm.b sera évalué à 4.

Utilisation de paramètres calculés pour v-model

Vous pourriez avoir besoin d'un v-model sur une propriété calculée. Normalement, le modèle virtuel ne met pas à jour la valeur de la propriété calculée.

Le gabarit:

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

Coiffant:

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

Le composant:

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

violon Ici, vous verrez que cliquer sur le bouton radio n'a aucune utilité, votre statut est toujours en ligne.

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

violon Et maintenant, vous pouvez voir que la bascule se produit lorsque la case est cochée / décochée.