Comment définir les attributs du calcul dans vue

Dans Vue, le calcul est une fonctionnalité très puissante, qui nous permet de dériver de nouvelles valeurs de propriété​​en calculant les propriétés. Dans la plupart des cas, la propriété calculée est utilisée pour calculer une valeur plutôt que de modifier la valeur. Cependant, dans certains cas particuliers, nous devrons peut-être définir la propriété calculée sur une nouvelle valeur. Alors, dans Vue, comment définir la propriété calculée ? Ensuite, cet article y répondra un par un pour vous.

1. Utilisation de base de l'attribut calculé

Jetons d'abord un coup d'œil à l'utilisation de base de l'attribut calculé. L'attribut calculé est en fait un attribut avec les méthodes get et set. Parmi elles, la méthode get est utilisée pour calculer la valeur de l'attribut et la méthode set est utilisée pour définir la valeur de l'attribut. Voici un exemple :

computed: {
  fullName: {
    get: function() {
      return this.firstName + ' ' + this.lastName;
    },
    set: function(newValue) {
      var names = newValue.split(' ');
      this.firstName = names[0];
      this.lastName = names[names.length - 1];
    }
  }
}

Dans le code ci-dessus, nous définissons une propriété calculée fullName dont la valeur est la combinaison de firstName et lastName. Dans la méthode get, nous calculons la valeur de fullName en concaténant firstName et lastName. Dans la méthode set, nous modifions la valeur de l'attribut d'origine en divisant la nouvelle valeur fullName en firstName et lastName, puis en définissant leurs valeurs en même temps.

2. Précautions pour la méthode set de l'attribut calculé

Bien que la méthode set de l'attribut calculé semble utile, elle doit également faire attention à certaines choses. Les points les plus importants sont les suivants :

1. Étant donné que l'attribut calculé est essentiellement en lecture seule, lors de la définition de l'attribut, vous devez vous assurer que la valeur définie n'affectera pas d'autres endroits.
2. Étant donné que l'attribut calculé lui-même ne stocke pas de valeur, lors de la définition de l'attribut, vous devez vous assurer que la valeur définie est correcte la prochaine fois que vous l'obtiendrez.

3. Exemples d'applications pratiques

Ci-dessous, nous utilisons des exemples d'applications pratiques pour montrer comment définir l'attribut calculé.

Tout d'abord, nous définissons un composant avec un attribut calculé totalPrice, dont la valeur est le prix du produit multiplié par la quantité du produit, c'est-à-dire totalPrice = prix * quantité. Nous pouvons utiliser le code suivant pour implémenter cette propriété calculée :

<template>
  <div>
    <p>单价：{{ price }}</p>
    <p>数量：<input v-model="quantity"></p>
    <p>总价：{{ totalPrice }}</p>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        price: 10,
        quantity: 2
      }
    },
    computed: {
      totalPrice: {
        get() {
          return this.price * this.quantity
        },
        set(newValue) {
          this.quantity = newValue / this.price
        }
      }
    }
  }
</script>

Dans le code ci-dessus, nous définissons d'abord un composant qui contient une propriété calculée totalPrice. Dans la méthode get, nous utilisons le prix et la quantité pour calculer la valeur totale ; dans la méthode set, nous utilisons newValue et price pour calculer la nouvelle valeur de la quantité, puis mettons à jour les données pour mettre à jour le DOM.

Maintenant, si nous voulons fixer le prix total, plutôt que la quantité ou le prix, nous pouvons faire ceci :

this.totalPrice = 20;

Cela modifiera automatiquement la valeur de la quantité pour que le prix total soit égal à 20. Si nous voulons que le prix unitaire multiplié par la quantité soit égal au prix total, au lieu d'attribuer automatiquement la quantité lorsque le prix total est fixé, nous pouvons modifier la logique dans la méthode set comme suit :

set(newValue) {
  this.price = newValue / this.quantity
}

De cette façon, nous pouvons régler le prix total par La valeur du prix unitaire a été modifiée.

En général, l'attribut calculé est en effet une fonctionnalité très puissante, mais il y a beaucoup de choses auxquelles il faut prêter attention. En utilisation réelle, nous devons utiliser la méthode d'ensemble des attributs calculés avec précaution en fonction de la situation pour éviter des problèmes inutiles.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!