VUE3 Quick Start: Calculate data using computed attributes

VUE3 Quick Start: Calculate data using computed attributes

VUE is a front-end framework based on the MVVM pattern, and it has developed into one of the most popular front-end frameworks in the world. VUE3 is the latest version of VUE, providing developers with better performance and development experience. In VUE3, computed properties are very useful tools that can easily calculate the value of data and automatically update when the data is updated.

This article will introduce how to use calculated properties (computed) to calculate data and demonstrate some practical use cases.

1. Introduction to computed attributes

A computed attribute refers to an attribute used in a template, and its value is obtained through calculation. Computed properties are usually used for complex operations of binding data, such as filtering data, formatting data, etc. Computed properties are reactive and their values ​​automatically update when the data they depend on changes.

2. Use computed properties

In VUE3, computed properties are implemented by defining a function. Computed properties can be defined by using the keyword computed in a component's properties. The following is a simple example:

template:

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

script:

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

In the above example, a calculated attribute message is defined, and the value of this attribute is obtained by splicing The strings obtained by firstName and lastName.

3. Use cases of calculated properties

a. Filtering data

Computed properties are very suitable for filtering data. The following is an example of using filters to filter out data that meets a certain Array elements of a 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);
        }
    }
}

In the above example, a variable items is defined, and then by defining a calculated attribute filteredItems, Filter out those elements in the items array whose value contains filterKey.

b. Format data

Computed properties can also be used to format data. The following is an example of using calculated properties to format dates into strings:

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

In the above example, a variable date of Date type is defined, and then it is formatted into the characters of "yyyy-MM-dd" by calculating the attribute formattedDate string.

4. Summary

Calculated properties are a very convenient tool in VUE3, which can perform various complex calculations on data. When using it, you need to pay attention to the dependencies of the data to ensure that the value of the calculated attribute is automatically updated when the dependent data changes.

The above is the detailed content of VUE3 Quick Start: Calculate data using computed attributes. For more information, please follow other related articles on the PHP Chinese website!