Computed Properties

Computed properties, convenient for simple operations, allow us to define a property that is used the same way as data, but can also have some custom logic that is cached based on its dependencies. A computed property will only re-evaluate when some of its reactive dependencies have changed.

• Updating a large amount of information while a user is typing, such as filtering a list
• Gathering information from your Vuex store
• Form validation
• Data visualizations that change depending on what the user needs to see

Input:

<template>
  <p>My Full name is: {{ fullName }}</p>
</template>

<script>
export default {
  data() {
    return {
      firstName: 'Joe',
      lastName: 'Exotic'
    }
  },
  computed: {
    fullName: function() {
      return this.firstName + ' ' + this.lastName
    }
  }
}
</script>

Output:

My Full name is: Joe Exotic

See the official Vue.js doc