JSFiddle - React, Tailwind, and code Playground

by Serghei Cebotari

HTML

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

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

JavaScript

new Vue({
	el: '#app',
  data: {
  	counter: 0
  },
  computed: {
  	output: function() {
    	return this.counter>5 ? 'Greater 5' : 'Smaller 5';
    }
  },
  watch: {
  	counter: function(value) {
    	var vm = this;
    	setTimeout(() => vm.counter = 0, 2000);
    }
  },
  methods: {
  	result: function() {
    	return this.counter>5 ? 'Greater 5' : 'Smaller 5';
    }
  }
});