Computed Properties and Watchers — Vue.js | vue computed parameter
ComputedPropertiesIn-templateexpressionsareveryconvenient,buttheyaremeantforsimpleoperations.Puttingtoomuchlogicinyourtemplatescanmakethembloatedandhardtomaintain.Forexample:
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. For example:
<div id="example">{{ message.split().reverse().join() }}</div>At this point, the template is no longer simple and declarative. You have to look at it for a second before realizing that it displays message in reverse. The problem is made worse when you want to include the reversed message in your template more than once.
That’s why for any complex logic, you should use a computed property.
Basic Example<div id="example"><p>Original message: "{{ message }}"</p><p>Computed reversed message: "{{ reversedMessage }}"</p></div>var vm = new Vue({el: #example,data: {message: Hello},computed: {// a computed getterreversedMessage: function () {// `this` points to the vm instancereturn this.message.split().re...