Berechnete Eigenschaften in Vue

Man kann Eigenschaften definieren, die reaktiv auf der Grundlage anderer Eigenschaften berechnet werden. Solche Eigenschaften werden als berechnete bezeichnet. Sie befinden sich in der Option computed.

Schauen wir uns ein Beispiel an. Nehmen wir an, in den Eigenschaften sind der Vorname und Nachname eines Users gespeichert:

data() {
	return {
		name: 'john',
		surn: 'smit',
	}
}

Lassen Sie uns eine Eigenschaft full erstellen, die den vollständigen Namen mit Nachname enthält:

computed: {
	full: function() {
		return this.name + ' ' + this.surn;
	}
}

Lassen Sie uns den Inhalt unserer Eigenschaften in der Darstellung ausgeben:

<template>
	<p>{{ name }}</p>
	<p>{{ surn }}</p>
	<p>{{ full }}</p>
</template>

Berechnete Eigenschaften ändern sich reaktiv. Das bedeutet, wenn wir den Vornamen oder Nachnamen ändern, dann wird sich auch unsere Eigenschaft full automatisch reaktiv ändern und wir sehen die Änderungen sofort auf dem Bildschirm.

Nehmen wir an, in der Eigenschaft cost ist der Preis eines Produkts gespeichert, und in der Eigenschaft amount - die Anzahl dieser Produkte. Erstellen Sie eine berechnete Eigenschaft price, die den Gesamtpreis der Produkte enthält (Preis multipliziert mit der Anzahl).

Erstellen Sie einen Button, dessen Klick die Eigenschaft cost ändert. Prüfen Sie, ob sich die berechnete Eigenschaft dabei ebenfalls ändert.