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>

welookups is optimized for learning.© welookups. 2018 - 2019 All Right Reserved and you agree to have read and accepted our term and condition.