Démarrage rapide VUE3 : Calculer des données à l'aide d'attributs calculés

VUE3 Démarrage rapide : utiliser des attributs calculés pour calculer des données

VUE est un framework front-end basé sur le modèle MVVM, et il est devenu l'un des frameworks front-end les plus populaires au monde le monde. VUE3 est la dernière version de VUE, offrant aux développeurs de meilleures performances et une meilleure expérience de développement. Dans VUE3, les propriétés calculées sont des outils très utiles qui peuvent facilement calculer la valeur des données et se mettre automatiquement à jour lorsque les données sont mises à jour.

Cet article expliquera comment utiliser les propriétés calculées pour calculer des données et démontrera quelques cas d'utilisation pratiques.

1. Introduction aux attributs calculés

Un attribut calculé fait référence à un attribut utilisé dans un modèle, et sa valeur est calculée. Les propriétés calculées sont généralement utilisées pour des opérations complexes de liaison de données, telles que le filtrage des données, le formatage des données, etc. Les propriétés calculées sont réactives et leurs valeurs se mettent automatiquement à jour lorsque les données dont elles dépendent changent.

2. Utiliser les propriétés calculées

Dans VUE3, les propriétés calculées sont implémentées en définissant une fonction. Les propriétés calculées peuvent être définies à l'aide du mot-clé calculé dans les propriétés d'un composant. Voici un exemple simple :

template:

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

script:

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

Dans l'exemple ci-dessus, un message d'attribut calculé est défini, qui La valeur de l'attribut est une chaîne obtenue en concaténant firstName et lastName.

3. Cas d'utilisation des propriétés calculées

a Filtrage des données

Les propriétés calculées sont très adaptées au filtrage des données. utiliser un filtre de filtrage pour filtrer les éléments du tableau qui remplissent une certaine condition :

template:

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

Dans l'exemple ci-dessus, un Éléments variables, puis filtrez les éléments du tableau items dont la valeur contient filterKey en définissant un attribut calculé filteredItems.

b. Formatage des données

Les propriétés calculées peuvent également être utilisées pour formater des données. Voici un exemple d'utilisation de propriétés calculées pour formater une date en chaîne : #🎜🎜 #.

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')}`;
        }
    }
}

Dans l'exemple ci-dessus, une variable de type Date date est définie, puis elle est formatée via l'attribut calculé formattedDate. la chaîne est "aaaa-MM-jj".

4. Résumé

Les propriétés calculées sont un outil très pratique dans VUE3, qui peut effectuer divers calculs complexes sur les données. Lorsque vous l'utilisez, vous devez faire attention aux dépendances des données pour vous assurer que la valeur de l'attribut calculé est automatiquement mise à jour lorsque les données dépendantes changent.

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!