# 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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

# Output:

My Full name is: Joe Exotic

See the official Vue.js doc