JSFiddle - React, Tailwind, and code Playground

by Breno RdV

HTML

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

<div id="app">
  <button v-on:click="counter++">Inc</button>
  <button v-on:click="counter--">Dec</button>
  <button v-on:click="counter2++">Inc2</button>
  <button v-on:click="counter2--">Dec2</button>  
  <p>Counter: {{ counter | counter2 }}</p>
  <p>Result {{ result() | output }}</p>
</div>

JavaScript

new Vue({
	el: "#app",
  data: {
  	counter: 0,
    counter2: 0
  },
  computed: {
		output: function() {
    	console.log("computed!");
    	return this.counter > 5 ? ">5" : "<5";
    }  	
  },
  watch: {
  	counter: function(value) {
    	var vm = this;
      setTimeout(function(){
      	vm.counter = 0;
      },2000);
    }    
  },
  methods: {
		result: function() {
    	console.log("method!");
    	return this.counter > 5 ? ">5" : "<5";
    }
  }
});