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の時にだけ適用される。

まとめ

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