JSFiddle - React, Tailwind, and code Playground

by Pedro Cruz

HTML

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

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

JavaScript

new Vue({
	el: '#app',
  data: {
  	name: 'Pedro',
    counter: 0,
    secondCounter: 0
  },
  computed: {
  	output: function() {
    	console.log('Computed');
    	return this.counter > 5 ? 'Greater 5' : 'Smaller 5';
    }
  },
  watch: {
  	counter: function (val) {
    	var vm = this;
    	setTimeout(function() {
      	vm.counter = 0;
      }, 2000)
    }
  },
  methods: {
  	result() {
    	console.log('method');
    	return this.counter > 5 ? 'Greater 5' : 'Smaller 5';
    }
  }
})