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: 式}' という形で指定します.

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

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

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

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

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

Reference

• vue.js
• Vue.js 1.0.0 リリースしました - vue.js
• #ウデマエアーカイブ をVue.js@1.0.0にアップデート！ - console.lealog();