computedによるclass変更

はじめに

公式にある基礎なのですが、最近Vueを仕事で使っていなくて忘れてしまうので、ちょっと書いておきます。

何かしらのアクションで、styleを変更する事はよくあります。
例えば、clickなどアクションへの反応、validationのエラー、処理の成功失敗などです。

v-bind:classを使う方法もありますが、公式にあるようにcomputed（算出プロパティ）を利用するのが一般的とのこと。
実際やってみると、computed利用の方が、状態をdataプロパティ、処理をcomputedにまとめられるのでコード全体がわかりやすくなると思いました。

流れ

1. イベントでメソッド実行
2. dataのプロパティの値を変更
3. computed（算出プロパティ）でclassを変更
4. styleのclassが変わる

サンプル

ボタン押下でclassが変わります。

See the Pen Change class by 'computed' by H.N (@H_Naito) on CodePen.

参考