VUE3-Schnellstart: Berechnen Sie Daten mithilfe berechneter Attribute

VUE3-Schnellstart: Verwenden Sie berechnete Attribute, um Daten zu berechnen

VUE ist ein Front-End-Framework, das auf dem MVVM-Muster basiert und sich zu einem der beliebtesten Front-End-Frameworks weltweit entwickelt hat. VUE3 ist die neueste Version von VUE und bietet Entwicklern eine bessere Leistung und Entwicklungserfahrung. In VUE3 sind berechnete Eigenschaften sehr nützliche Werkzeuge, die den Wert von Daten einfach berechnen und automatisch aktualisieren können, wenn die Daten aktualisiert werden.

In diesem Artikel wird die Verwendung berechneter Eigenschaften zur Berechnung von Daten vorgestellt und einige praktische Anwendungsfälle demonstriert.

1. Einführung in berechnete Attribute

Ein berechnetes Attribut bezieht sich auf ein Attribut, das in einer Vorlage verwendet wird, und sein Wert wird berechnet. Berechnete Eigenschaften werden normalerweise für komplexe Vorgänge zum Binden von Daten verwendet, z. B. zum Filtern von Daten, Formatieren von Daten usw. Berechnete Eigenschaften sind reaktiv und ihre Werte werden automatisch aktualisiert, wenn sich die Daten ändern, von denen sie abhängen.

2. Berechnete Eigenschaften verwenden

In VUE3 werden berechnete Eigenschaften durch die Definition einer Funktion implementiert. Berechnete Eigenschaften können mithilfe des in den Eigenschaften einer Komponente berechneten Schlüsselworts definiert werden. Hier ist ein einfaches Beispiel:

template:

<div>{{message}}</div>

script:

export default {
    name: 'Demo',
    data() {
        return {
            firstName: 'John',
            lastName: 'Doe'
        };
    },
    computed: {
        message() {
            return `Hello, ${this.firstName} ${this.lastName}!`;
        }
    }
}

Im obigen Beispiel wird eine berechnete Attributnachricht definiert, deren Wert eine Zeichenfolge ist, die durch Verkettung von Vorname und Nachname erhalten wird.

3. Anwendungsfälle von berechneten Eigenschaften

Berechnete Eigenschaften eignen sich sehr gut zum Filtern von Daten:

Vorlage:

<div v-for="item in filteredItems">{{item}}</div>

script:

export default {
    name: 'Demo',
    data() {
        return {
            items: ['apple', 'banana', 'orange'],
            filterKey: 'a'
        };
    },
    computed: {
        filteredItems() {
            return this.items.filter(item => item.indexOf(this.filterKey) > -1);
        }
    }
}

Im obigen Beispiel wird eine Variable „items“ definiert, und dann werden durch die Definition eines berechneten Attributs „filteredItems“ die Elemente im Array „items“, deren Wert filterKey enthält, herausgefiltert.

b. Formatieren von Daten

Berechnete Eigenschaften können auch zum Formatieren von Daten verwendet werden. Hier ist ein Beispiel für die Verwendung berechneter Eigenschaften zum Formatieren eines Datums in eine Zeichenfolge:

template:

<div>{{formattedDate}}</div>

script:

export default {
    name: 'Demo',
    data() {
        return {
            date: new Date()
        };
    },
    computed: {
        formattedDate() {
            return `${this.date.getFullYear()}-${(this.date.getMonth() + 1).toString().padStart(2,'0')}-${this.date.getDate().toString().padStart(2,'0')}`;
        }
    }
}

Im obigen Beispiel , wird eine Datumsvariable vom Typ „Datum“ definiert und dann über das berechnete Attribut formattedDate in eine Zeichenfolge „yyyy-MM-dd“ formatiert.

4. Zusammenfassung

Berechnete Eigenschaften sind ein sehr praktisches Werkzeug in VUE3, mit dem verschiedene komplexe Berechnungen an Daten durchgeführt werden können. Bei der Verwendung müssen Sie auf die Abhängigkeiten der Daten achten, um sicherzustellen, dass der Wert des berechneten Attributs automatisch aktualisiert wird, wenn sich die abhängigen Daten ändern.

Das obige ist der detaillierte Inhalt vonVUE3-Schnellstart: Berechnen Sie Daten mithilfe berechneter Attribute. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!