vue.js tips - v-bind:class を使って class の on/off を切り替えよう

phi phi on vue.js

v-bind:class を使って class の on/off を切り替える方法について解説します.

v-class は vue.js 1.0~ で廃止されました. これからは v-bind:class を使いましょう!

Runstant Demo

とりあえずデモです. クリックすると .active クラスが toggle します.

v-bind:class の使い方

v-bind:class='{classA: 式, classB: 式}' という形で指定します.

式の評価結果が truefalse かに応じて key に指定しているクラスの on/off を切り替えることができます.

今回のサンプルでは, v-bind:class='{active:isActive}' と指定しているので isActive の値に応じて .active クラスの on/off が切り替わります.

更に今回のサンプルでは, v-on:click='isActive=!isActive' でクリックするたびに isActive フラグを toggle させています.

クリックするたびに見た目が 非アクティブ/アクティブ に切り替わるのが分かるかと思います.

ちなみに v-bind の部分は省略可能です!

Reference