JSFiddle - React, Tailwind, and code Playground

by mogu10

HTML

<script src="https://getfirebug.com/firebug-lite-debug.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

<div id="app">
  <input type="text" v-model="name">
  <p>{{ name }}</p>
  <p>この状態なら双方にバインディング可能（nameからinput、inputからname）</p>
   <p>これはv-onとかにはない</p>
</div>

<div id="app2">
  <button v-on:click="increase">Increase</button>
   <button v-on:click="decrease">Decrease</button>
  <p>Counter: {{ counter }}</p>
  <p>Result: {{ result }}</p>
</div>

<div id="app3">
  <button v-on:click="counter++">Increase</button>
   <button v-on:click="counter--">Decrease</button>
   <button v-on:click="secondCounter++">Increase Second</button>
  <p>Counter: {{ counter }} | {{ secondCounter }}</p>
  <p>Result: {{ result() }} | {{ output }}</p>
  <a v-bind:href="link">computedとmethodsの違いをconsoleで表示</a>
</div>


<div id="app4">
  <button v-on:click="counter++">Increase</button>
   <button v-on:click="counter--">Decrease</button>
   <button v-on:click="secondCounter++">Increase Second</button>
  <p>Counter: {{ counter }} | {{ secondCounter }}</p>
  <p>Result: {{ result() }} | {{ output }}</p>
  <a v-bind:href="link">computedとmethodsの違いをconsoleで表示</a>
</div>

CSS

#app {
  border: 3px solid pink;
}
#app2 {
  border: 3px solid lightblue;
}
#app3 {
  border: 3px solid lightgreen;
}

JavaScript

new Vue({
el: '#app',　
data: {
	name: 'Max'
},
methods: {

}
});

new Vue({
el: '#app2',　
data: {
	counter: 0,
  result: ''
},
methods: {
	increase: function(){
  	this.counter++;
    this.result = this.counter > 5 ? 'Greater than 5' : 'Smaller than 5'
  },
  decrease: function(){
  	this.counter--;
    this.result = this.counter > 5 ? 'Greater than 5' : 'Smaller than 5'
  }
}
});




new Vue({
el: '#app3',　
data: {
	counter: 0,
  //result: ''
  secondCounter: 0,
  link: 'https://qiita.com/bohebohechan/items/71b3ec5af04bbcd088b8'
},
computed: {
	output: function() {
  	console.log('Computed');
  	return this.counter > 5 ? 'Greater than 5' : 'Smaller than 5'
  }
},
watch: {
	counter: function(value) {
  	var vm = this;
  	setTimeout(function() {
    	this.counter = 0;
    }, 2000);
  }
},
methods: {
	result: function() {
  	console.log('Method');
  	return this.counter > 5 ? 'Greater than 5' : 'Smaller than 5'
  }
}
});






var vm = new Vue({
el: '#app4',　
data: {
	counter: 0,
  //result: ''
  secondCounter: 0,
  link: 'https://qiita.com/bohebohechan/items/71b3ec5af04bbcd088b8'
},
computed: {
	output: function() {
  	console.log('Computed');
  	return this.counter > 5 ? 'Greater than 5' : 'Smaller than 5'
  }
},
watch: {
	counter: function(value) {
  	setTimeout(function() {
    	vm.counter = 0;
    }, 2000);
  }
},
methods: {
	result: function() {
  	console.log('Method');
  	return this.counter > 5 ? 'Greater than 5' : 'Smaller than 5'
  }
}
});