11. Computed property

A computed property depends on data properties, and when they change, it also changes.

Here if either data properties of first or last change, then fullName will also change.

This is App.vue file:

<template>
  <div>
    <fieldset>
      <label>Enter first:</label>
      <input type="text" v-model="first">
      <label>Enter last:</label>
      <input type="text" v-model="last">
    </fieldset>
    <h2>Full Name:</h2>
    <h2>{{fullName}}</h2>
  </div>
</template>

<script>
export default {
  data() {
    return {
      first: "",
      last:""
    }
  },
  computed: {
    fullName: function() {
      return this.first + " " + this.last;
    }
  }
}
</script>

<style>
input {
  background-color: #EEE;
  color: #111;
  display: block;
}
h2 {
  color: blue;
  background-color: orange;
  width: 400px;
  margin: 20px auto;
  text-align: center;
}
</style>

This is the output: