How to use the computed calculation property of Vue

This article mainly introduces "how to use the computed calculation attribute of Vue". In the daily operation, I believe that many people have doubts about how to use the computed calculation attribute of Vue. The editor consulted all kinds of data and sorted out a simple and easy-to-use method of operation. I hope it will be helpful to answer the doubt of "how to use the computed calculation attribute of Vue". Next, please follow the editor to study!

Computed calculation attribute 1. What is a calculation attribute

Computed attributes are essentially methods, but when using these computed properties, their names are used directly as attributes, and they are not called as methods, and do not need to be called with parentheses ().

2. Why do you use computational attributes

When you need an attribute, you need to go through some calculations, such as you want a discounted discount after the money attribute, there are now price prices, and discount discounts. So, discounted=price*discount. Discounted is associated with the existing properties price and discount.

To get the value of discounted, we can write like this.

{{price*discount}}

Don't we want the discounted attribute? it seems that there is no need to add an attribute in this way, just use the expression to calculate the discounted value.

So, if we have to get a discounted, we might think of using methods to write a method for calculation.

Original price:

Current price: data () {return {price:100, discount:0.8}}, methods: {discounted () {this.price*discount}}

Take a look at the comunidad calculation properties of vue.

Original price:

Current price: computed: {discounted () {return this.price*this.discount}}

And we wonder, isn't it possible to get discounted by using the expression price*discount, and why bother to write the method, computed?

So the problem is, if our discounted is based on the amount of money you buy, follow the rules:

Original price x discount 0