vue.js - Reacting to changes with computed properties

by Rodwyn Moreno

HTML

<script src="https://unpkg.com/vue/dist/vue.js"></script>

<div id="app">
  <div>
    <button v-on:click="counter++">Increase</button>
    <button v-on:click="counter--">Decrease</button>
  </div>
  
  <div>
    <button v-on:click="secondCounter++">Increase second</button>
    <button v-on:click="secondCounter--">Drecrease second</button>
  </div>
  
  <p>Counter: {{ counter }} | {{ secondCounter }}</p>
  <p>Result: {{ result() }} | {{ output }}</p>
</div>

JavaScript

new Vue({
	el: '#app',
  data: {
  	counter: 0,
    secondCounter: 0
  },
  computed: {
  	output: function() {
    	console.log('computed');
      return this.counter > 5 ? 'Greater than 5' : 'Smaller than 5';
    }
  },
  methods: {
  	result: function() {
    	console.log('method');
      return this.counter > 5 ? 'Greater than 5' : 'Smaller than 5';
    }
  }
});