What are computed properties? ? ?
1. In computed, some properties can be defined, which are called [Computed Attributes]
2. The essence of calculating attributes is a method, but their names are generally used directly as attributes and will not be called as methods.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="../lib/vue-2.4."></script>
</head>
<body>
<div >
<input type="text" v-model="firstname">+
<input type="text" v-model="lastname">=
<input type="text" v-model="fullname">
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
firstname: '',
lastname: ''
},
methods: {},
computed:{
// In computed, some properties can be defined, which are called [Computed Attributes] // The essence of calculating attributes is a method, but their names are generally used directly as attributes and will not be called as methods. 'fullname':function () {
return + '-' + ;
}
}
})
</script>
</body>
</html>
Pay attention to it
1. Calculate the attribute. When calling, do not add () to call it, and use it as a normal attribute.
2. If the data in the data referenced in the function of the computed attribute changes, the value of the computed attribute will be recalculated immediately.
3. The evaluation result of the calculation attribute will be cached for easy use next time; if all the data coming from within the calculation attribute method does not change, it will not be recalculated.
Content extension
How to use computed (calculated attribute) of vue
In vue, some simple calculations can be calculated directly in the template, such as: {{ number + 1 }}; but if there are too many complex calculations in the template, it is difficult to maintain; so for any complex logic, you should use the reason for the calculation properties;
1. After processing, as long as the source data has not changed, the computed function will not change in reverse to the corresponding data, which is equivalent to being cached locally. When changes occur, the function of the computed corresponding data will also change;
2: computed attribute and methods attribute
You may have noticed that we can achieve the same effect by calling method: we can define the same function as a method instead of a computed property, and for the final result, both ways are indeed the same;
However, computed properties are cached based on their dependencies. Computed properties will only be re-evaluated when their related dependencies have changed. This means that as long as the message has not changed, multiple accesses to reversedMessage computed properties will immediately return the result of the previous planned calculation without having to execute the function again.
3: Properties in computed;
The calculation attribute has only getter by default, but a setter can also be provided when needed;
var vm=new Vue({
el:"#demo",
data:{
firstName:"foo",
lastName:"Bar",
fullName:"foo Bar"
},
computed:{
fullName:function(){
get:function(){
return +" "+;
},
setter:function(){
var names=('');
=names[0];
=names[-1]
}
}
}
});
This is the end of this article about Vue computed computing attribute code examples. For more related Vue computed computing attribute content, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!