Table of contents
1. What is a computed property?
Second, the use of calculated properties?
1. What is a computed property?
Calculated attribute: After a series of operations, an attribute value is finally obtained. This dynamically calculated attribute value can be used by the template structure [v-bind, interpolation expression] or the methods method.
Second, the use of calculated properties?
<div :style="{backgroundColor: rgb}">{ { rgb }}</div>
var vm = new Vue({
el: "#app",
data: {
r: 0,
g: 0,
b: 0
},
// All computed properties are written in the computed node
// Computed properties must be defined as methods when they are defined
computed: {
// Finally, in this method, return a generated string attribute, which can be used directly
rgb() {
return `rgb(${this.r}, ${this.g}, ${this.b})`
}
}
})
console.log(vm);
Features of computed properties:
It should be defined as a method when it is defined , but it can be used as an ordinary attribute when used .
benefit:
1) Implemented code reuse
2) If the dependent data source in the calculated property changes, the calculated property will also be re-evaluated accordingly