[Vue]チェックボックスを選択して、任意のclassを変更するサンプル

いきなりコード

See the Pen [Vue]checkboxでclassを変えるサンプル by riotam (@riotam4) on CodePen.

解説

このチェックボックスは、

HTML側の2行目

<input type="checkbox" v-model="changeColor">

v-modelの指定によって、

JS側の5行目

data: {
  changeColor: false
},

↑の「changeColor」の真偽と連動しています。
なので、今回のコードでは初期値をfalseにしていますが、これをtrueにしておくと、はじめからチェックボックスにチェックがしてある状態になります。

そして、classを変化させている部分は…

HTML側3行目

<p :class="{change: changeColor}">この文字の色が変わります</p>

↑の「:class...」の部分です。
「:」は「v-bind:」を省略した書き方です。
そのあとは、:class="{change: changeColor}"としていることで、
JS側のdataに入っている「changeColor」がtrueのとき、classを「change」に変更するという指示になります。

あとは、

CSS側

.change{
  color: red;
}

chageクラスのものを赤色に変えているCSSを用意し、待ち受けておくだけです。