Vue.js クリックしたボタンの色を変化させる。

##環境
jsfiddle
vue@2.6.14

##クリックしたボタンの色を変化させる!
###完成したコード
ボタンをクリックするとボタンの色が変化します。

クリック前

クリック後

###詳細
####css

.buttoncolor {
	background-color: green;
}

変更後のボタンの色を指定しています。
####html

<div id='app'>
	<button v-bind:class="{ buttoncolor: buttonState }" v-on:click="changeState">
		 色を変えるためのボタン
	</button>
	{{buttonState}}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>

①v-bind:classではv-bind:class="{class名: バインド先(真偽値を持つ)}"とすることで、真偽値を持つbuttonState変数とbuttoncolorクラスを対応させている。
つまりbuttonStateがtrueの時、buttoncolorクラスが適用されるが、falseの際には適用されなくなることでボタンの色が変化する。

②v-on:clickは、クリックした際に作成したchangeStateメソッドが実行され、buttonStateの真偽値が変更される。
真偽値が変更されることで①が実行される。(changeStateメソッドの詳細は、sctiptの詳細で説明します。)

####script

var app = new Vue ({
	el:'#app',
	data:{
		buttonState: false	
	},
	methods:{
	 changeState: function(){
		 this.buttonState = !this.buttonState
	 }
	}
})

①data内に、真偽値を持つbuttonState変数を指定している。
②methodsでは、呼び出された際に、真偽値を変更するchangeStateメソッドを作成している。

###動作
①ボタンがクリックされる
②v-on:clickで指定された、changeStateメソッドが実行される。
③②でbuttonStateの真偽が変更される。
④③で真偽値が変更されたこと、v-bindでバインドされたクラスがtrueの時にだけ適用される。

##まとめ
簡単なコードですが、いざ実装するとなると慣れるまでは時間がかかってしまいました。
私と同じ初心者さんの参考になればと嬉しいです!