【Vue.js】要素にclass属性を動的に追加したり、外したりする方法

【Vue.js】要素にclass属性を動的に追加したり、外したりする方法

Vue.jsを使って、特定の要素にclass属性をつけたり、外したりする方法を紹介します。
jQueryでいう、「addClassメソッド」「removeClassメソッド」と同じような動作を実現します。

コード例

まずは、実際に動くコードを見てみましょう。

See the Pen mGBaXV by 匠 (@dilphinrokujiro) on CodePen.

ボタンをクリックすると、class属性が切り替わることによって、色がついたり、消えたりします。
ON、OFFを表現する際に使えるかと思います。

Vue.jsの処理内容を解説

Vue.jsの処理

isClickプロパティでクリックの状態を保持する

    data: {
        isClick: false,
    },

isClickプロパティの値によって、ボタンのON、OFFの状態を把握します。
値がtrueなら、ボタンがONの状態。
値がfalseなら、ボタンがOFFの状態。
ということになります。

doClickメソッドでisClickプロパティの値を反転する

    methods: {
        doClick: function(){
            this.isClick = !this.isClick;
        }
    }

doClickメソッドが実行されれば、isClickプロパティの値を反転するようにします。
つまり、isClickプロパティがtrueの状態で、doClickメソッドが実行されれば、isClickプロパティはfalseになります。

HTMLの処理

ボタンをクリックするとdoClickメソッドを呼び出す

    <button class="btn" v-on:click="doClick">Click</button>

「v-on:click」は、この要素がクリックされた時に処理を実行したいときに指定します。
処理したい内容は引数として渡します。
今回は、doClickメソッドを実行したいので、「v-on:click=”doClick”」となります。

ちなみに、Vue.jsにおいて、「v-」から始まる属性はディレクティブといい、Vue.jsで処理される特別な属性です。

isClickプロパティの値によって、class属性を変える

    <button class="btn" v-bind:class="{ 'btn-primary': isClick }">Click</button>

「v-bind:class」は、引数に指定した値をclass属性に追加したいときに指定します。
今回の例だとisClickプロパティの値がtrueなら、「btn-primary」というクラスが付与され、
isClickプロパティの値がfalseなら、「btn-primary」というクラスが外されます。
(厳密に言うと、「クラスが外される」わけではないのですが、ここではわかりやすいようにこの表現にしています。)

引数に指定する値を{ }で囲む点に注意してください。

jQueryとコーディング量を比較

同じ結果が得られるように、jQueryで単純に書くとこうなります。

See the Pen xaXBmj by 匠 (@dilphinrokujiro) on CodePen.

コーディング量はあまり変わらないですが、シンプルなのはVue.jsの方だと感じるのではないでしょうか?
そして、jQueryの方では、つけたり外したりしたいクラスを「btn-primary」と固定して書いていますが、それ以外のクラスも考慮しなければならなくなった場合、どんどん複雑になっていきます。
そのあたりは、また別の記事に書こうと思います..。

まとめ

ここ最近、jQueryで書いたプログラムを、Vue.jsに置き換える作業をしています。
なので、しばらくは今回のように、jQueryで書いていた処理を、結果を変えずにVue.jsで書くとどうなるか、というのを備忘録的にまとめようと思います。