Vue.js - Computed Property

index.html

<div id="app">
  <h3>Your Name: <input v-model.lazy="userData" /></h3>
  <h2 v-if="userData">Initial entry: {{ userData }} </h2>
  <h2 v-if="userData">Computed Value: {{ greeting }}</h2>
</div>

script.babel

new Vue({
  el: '#app',
  data() {
    return {
      userData: ''
    }
  },
  computed: {
    greeting() {
      return `Howdy you are ${this.userData}!`
    }
  }
});

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.8/vue.min.js"></script>

vue-js-computed-property.markdown

Vue.js - Computed Property

A Pen by Dano Manion on CodePen.

License.