JSFiddle - React, Tailwind, and code Playground

by BilisimOgretmeni

HTML

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app">
	<button v-on:click="counter++">Arttır</button>
	<button v-on:click="counter--">Azalt</button>
	<button v-on:click="secondCounter++">2.Counter'ı Arttır</button>	
	
	<p> Counter : {{ counter }} | {{ secondCounter }}</p>
	<p> {{ result() }} | {{ output }}</p>
</div>

JavaScript

new Vue({
	el : "#app",
	data : {
		counter : 0,
		secondCounter : 0
	},
	methods : {
		result : function(){
			console.log("Method Calisti...");
			return this.counter > 10 ? "10'dan büyüktür" : "10'dan kücüktür."
		}
	},
	computed : {
		output : function(){
			console.log("Computed Calisti...")
			return this.counter > 10 ? "10'dan büyüktür" : "10'dan kücüktür."
		}
	},
	watch : {
		counter : function(value){
			vm = this;
		if (vm.time) {
                clearTimeout(vm.time);
            }
    vm.time = setTimeout(function(){
				vm.counter = 0;
			}, 1500)
		}
	}
})