In-template expressions are very convenient, but they are meant for simple operations. Putting too much logic in your templates can make them bloated and hard to maintain. That’s why for any complex logic, you should use a computed property. VueJS Computed
Example of good use of computed properties
<div id="computed_example">
First Name : <input type="text" v-model="firstName">
Last Name : <input type="text" v-model="lastName">
Full Name : <input type="text" v-model="fullName">
</div>
Example of bad use of computed properties. Avoid too much logic in the template for example or this becomes increasingly verbose
<div id="computed_example">
First Name : <input type="text" v-model="firstName">
Last Name : <input type="text" v-model="lastName">
Full Name : <input type="text" v-model="this.firstName + ' ' + this.lastName">
</div>
javascript
var vm = new Vue({
el: '#computed_example',
data: {
firstName : "John",
lastName: "Doe"
},
methods: {
},
computed :{
fullName: function () {
return this.firstName + ' ' + this.lastName
}
},
});