So legen Sie Attribute von Berechnungen in Vue fest

In Vue ist die Berechnung eine sehr leistungsstarke Funktion, die es uns ermöglicht, durch die Berechnung von Eigenschaften einige neue Eigenschaftswerte abzuleiten. In den meisten Fällen wird die berechnete Eigenschaft zur Berechnung eines Werts verwendet, anstatt den Wert zu ändern. In einigen Sonderfällen müssen wir jedoch möglicherweise die berechnete Eigenschaft auf einen neuen Wert festlegen. Wie kann also in Vue die berechnete Eigenschaft festgelegt werden? Als nächstes wird dieser Artikel sie einzeln für Sie beantworten.

1. Grundlegende Verwendung des berechneten Attributs

Werfen wir zunächst einen Blick auf die grundlegende Verwendung des berechneten Attributs. Das berechnete Attribut ist eigentlich ein Attribut mit Get- und Set-Methoden. Unter diesen wird die get-Methode zum Berechnen des Attributwerts und die set-Methode zum Festlegen des Attributwerts verwendet. Hier ist ein Beispiel:

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

Im obigen Code definieren wir eine berechnete Eigenschaft fullName, deren Wert die Kombination aus firstName und lastName ist. In der get-Methode berechnen wir den Wert von fullName, indem wir firstName und lastName verketten. In der Set-Methode ändern wir den ursprünglichen Attributwert, indem wir den neuen fullName-Wert in firstName und lastName aufteilen und dann gleichzeitig deren Werte festlegen.

2. Vorsichtsmaßnahmen für die Set-Methode des berechneten Attributs

Obwohl die Set-Methode des berechneten Attributs nützlich erscheint, gibt es auch einige Dinge, auf die man achten sollte. Die wichtigeren Punkte sind die folgenden:

1. Da das berechnete Attribut grundsätzlich schreibgeschützt ist, müssen Sie beim Festlegen des Attributs sicherstellen, dass der festgelegte Wert keine Auswirkungen auf andere Stellen hat.
2. Da das berechnete Attribut selbst keinen Wert speichert, müssen Sie beim Festlegen des Attributs sicherstellen, dass der festgelegte Wert beim nächsten Abrufen korrekt ist.

3. Praktische Anwendungsbeispiele

Im Folgenden zeigen wir anhand praktischer Anwendungsbeispiele, wie das berechnete Attribut eingestellt wird.

Zuerst definieren wir eine Komponente mit einem berechneten Attribut totalPrice, dessen Wert der Produktpreis multipliziert mit der Produktmenge ist, also totalPrice = Preis * Menge. Wir können den folgenden Code verwenden, um diese berechnete Eigenschaft zu implementieren:

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

Im obigen Code definieren wir zunächst eine Komponente, die eine berechnete Eigenschaft „totalPrice“ enthält. Bei der Get-Methode verwenden wir Preis und Menge, um den Gesamtwert zu berechnen. Bei der Set-Methode verwenden wir NewValue und Price, um den neuen Mengenwert zu berechnen, und aktualisieren dann die Daten, um das DOM zu aktualisieren.

Wenn wir nun den Gesamtpreis und nicht die Menge oder den Preis festlegen möchten, können wir Folgendes tun:

this.totalPrice = 20;

Dadurch wird der Wert der Menge automatisch geändert, sodass der Gesamtpreis 20 beträgt. Wenn wir möchten, dass der Stückpreis multipliziert mit der Menge dem Gesamtpreis entspricht, anstatt die Menge automatisch zuzuweisen, wenn der Gesamtpreis festgelegt wird, können wir die Logik in der Set-Methode wie folgt ändern:

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

Auf diese Weise können wir Legen Sie den Gesamtpreis fest um Der Einheitspreiswert wurde geändert.

Im Allgemeinen ist das berechnete Attribut zwar eine sehr leistungsstarke Funktion, es gibt jedoch viele Dinge, auf die geachtet werden muss. Bei der tatsächlichen Verwendung müssen wir die Set-Methode der berechneten Attribute je nach Situation sorgfältig verwenden, um unnötige Probleme zu vermeiden.

Das obige ist der detaillierte Inhalt vonSo legen Sie Attribute von Berechnungen in Vue fest. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!