Vue.js calculation properties
Calculate attribute keyword: computed.
Calculation properties are useful when dealing with some complex logic.
You can see the following example of inverting a string:
Instance 1
<div id=" app">
{{ message.split('').reverse().join('') }}
</div>
The template in instance 1 is very complicated and not easy to understand.
Next, let's look at an example using computed properties:
Instance 2
<div id=" app">
<p>Original string: {{ message }}</p>
<p>Invert the string after calculation: {{ reversedMessage }}</p>
</div>
<script>
Var vm = new Vue({
El: '#app',
Data: {
Message: 'welookups!'
},
Computed: {
// Calculate the getter of the property
reversedMessage: function () {
// `this` points to the vm instance
Return this.message.split('').reverse().join('')
}
}
})
</script>