Vue.js Computed Values

Vue.js Computed Values

by John Passmore

HTML

<div id="app">
  <label>Normal Date (default frmat) : {{date}}</label>
  <br><br>
  <label>Formatted Date (DD-MM-YYYY) : {{date.getDate()+'-'+(Number(date.getMonth())+1)+'-'+date.getFullYear()}}</label>
  <br><br>
  <label>Formatted Date (DD-MM-YYYY) using Computed Property : {{formattedDate}}</label>
</div>

CSS

label{
  font-size:20px;
}

JavaScript

var vm = new Vue({
  el: '#app',
  data: {
    date: new Date()
  },
  computed: {
    formattedDate: function() {
      return this.date.getDate() + '-' + (Number(this.date.getMonth()) + 1) + '-' + this.date.getFullYear();
    }
  }
});


// Set Interval for automatically updating the date property
var days = 1;
setInterval(function(){
	var result = new Date(vm.date);
  result.setDate(result.getDate() + days);
  vm.date = result;
},1000);