Vue.js Computed Properties Last Updated : 22 Feb, 2021 Summarize Comments Improve Suggest changes Share Like Article Like Report Vue is a progressive framework for building user interfaces. The core library is focused on the view layer only and is easy to pick up and integrate with other libraries. Vue is also perfectly capable of powering sophisticated Single-Page Applications in combination with modern tooling and supporting libraries. In Vue.js, any data value can be output using parentheses. However, this can host small computations since it is limited to a single JavaScript expression, and also that templates should only be concerned with displaying data to the user and not performing any logic computations. To avoid this limitation of a single expression and have more declarative templates, we use computed properties of Vue.js. The computed value follows the same old interpolation, but the computation logic is defined in JavaScript. Example 1: index.html <html> <head> <script src= "https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"> </script> </head> <body> <div id='parent'> <p>{{ fullName }}</p> </div> <script src='app.js'></script> </body> </html> app.js const parent = new Vue({ el: '#parent', data: { fName: 'Aiser', lName: 'Wold' }, computed: { fullName: function () { return `Full Name : ${this.fName} ${this.lName}` } } }) Output: Computed Properties Example 2: index.html <html> <head> <script src= "https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"> </script> </head> <body> <div id='parent'> <h2>Animal Helping NGO</h2> <p><strong>Total Members :</strong> {{ totalMembers }} </p> <p><strong>Donations from Male members : </strong> {{ maleDonation }} </p> <p><strong>Donations from female members : </strong> {{ femaleDonation }} </p> </div> <script src='app.js'></script> </body> </html> app.js const parent = new Vue({ el: '#parent', data: { mMembers: ['Arun', 'Raj', 'Kabir', 'Santanu','Aiser','Mikie'], fMembers: ['Tina','Jagriti','Nupur', 'Nancy','Rinkle'] }, computed: { totalMembers: function() { return this.mMembers.length + this.mMembers.length }, maleDonation: function() { return this.mMembers.length * 100; }, femaleDonation: function() { return this.fMembers.length * 50 } } }) Output: computed properties Reference:https://012.vuejs.org/guide/computed.html Comment More infoAdvertise with us Next Article Vue.js Props Declaration H hunter__js Follow Improve Article Tags : JavaScript Web Technologies Vue.JS Similar Reads Methods vs Computed in Vue Vue.js, with its simplicity and flexibility, has become a popular choice for building dynamic web applications. Among its many features, Vue provides two main ways to perform data manipulation and calculations within components: methods and computed properties. While they might seem similar at first 4 min read Vue.js Props Vue.js Props is an attribute to the configuration of the component. It is used to pass the data to the component to work dynamically. The props configuration defines the type of data it can receive from different components of Vue.Table of ContentProps DeclarationProp Passing DetailsOne-Way Data Flo 4 min read How to Pass Parameters in Computed Properties in VueJS ? In this article, we are going to learn how can we pass parameters in computed properties. The difference between a computed property and a method is that computed properties are cached, Methods are functions that can be called normal JS functions, but computed properties will be “re-calculated†anyt 2 min read Vue.js Composition API using Provide Vue.js is a progressive javascript framework for developing web user interfaces. It is a performant, approachable, and versatile framework. We can create Single Page Applications as well as Full Stack applications. It is built on top of HTML, CSS, and Javascript, making it easier for developers to i 3 min read Vue.js Props Declaration Vue.js Props Declaration facilitates the declaration of props explicitly for the Vue components. With this, Vue can identify how external props are passed to the component that should be treated as fall-through attributes. In other words, Props of Vue components is a configuration for the transfer o 3 min read Vue.js v-pre Directive The v-pre directive is a Vue.js directive used to skip compilation for this element and all its children. You can use this for displaying raw mustache tags. First, we will create a div element with id as app and let's apply the v-pre directive to an element. Further, we can use a heading element to 1 min read Like