Berechnete Eigenschaften verstehen

• 2 Minuten

Mithilfe der Handlebars-Syntax ({{ }}) können Sie Werte anzeigen und JavaScript in Ihren HTML-Code einfügen. Diese Syntax ist leistungsstark, kann jedoch zu verwirrendem oder sich wiederholendem Code führen. Sie können berechnete Eigenschaften in Vue verwenden, um Berechnungen und andere Formen dynamischer Zeichenfolgen auszulagern.

Hinzufügen einer berechneten Eigenschaft

Ähnlich, wie Methoden zu einem methods-Feld hinzugefügt werden, werden auch berechnete Eigenschaften zum computed-Feld hinzugefügt. Eine berechnete Eigenschaft ist eine Funktion, die einen Wert zurückgibt. Wie bei einer-Methode kann eine berechnete Eigenschaft mithilfe von this auf die aktive Vue-Instanz zugreifen.

Sie können berechnete Eigenschaften verwenden, um firstName und lastName in einer fullName-Eigenschaft zu kombinieren, Lookups in einem Array durchzuführen, um den richtigen Wert zurückzugeben, oder zum Ausführen anderer dynamischer Aufgaben.

Darüber hinaus ist eine berechnete Eigenschaft reaktiv. Wenn sich die Werte in der berechneten Eigenschaft ändern, wird die berechnete Eigenschaft aktualisiert, um die Änderung widerzuspiegeln.

Im folgenden Beispiel wird ein fullName erstellt.

const app = Vue.createApp({
    data() {
        return {
            firstName: 'Cheryl',
            lastName: 'Smith'
        }
    },
    computed: {
        fullName() {
            return `${this.lastName}, ${this.firstName}`
        }
    },
});

Ein Zeichenfolgenliteral verkettet die Felder lastName und firstName.