Vue.js - Computed Properties

by wistcc

HTML

<script src="https://unpkg.com/[email protected]"></script>
<div id="app">
    <label>Name:</label>
    <input type="text" v-model="name" />
    <br/><br/>
    <label>Age:</label>
    <input type="text" v-model="age" />
    <br/><br/><br/>
    <p>
      {{`${name} died at ${age} years old.`}} 
      <b>-- Ugly sintax</b>
    </p>
    <p>
      {{ getSentence() }}  
      <b>-- Not cached</b>
    </p>
    <p>
      {{ computedSentence }}  
      <b>-- Cached and awesome!!</b>
    </p>
    <img src="https://vignette3.wikia.nocookie.net/breakingbad/images/c/ca/Walter_White_Obituary.jpg/revision/latest?cb=20161029012923"/>
</div>

JavaScript

var app = new Vue({
  el: '#app',
  data: {
    name: 'Walter White',
		age: 52
  },
  computed: {
  	computedSentence(){
    	return `${this.name} died at ${this.age} years old.`;
    }
  },
  methods: {
  	getSentence(){
    	return `${this.name} died at ${this.age} years old.`;
    }
  }
})