LoginSignup
3

More than 3 years have passed since last update.

posted at

updated at

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.

参考

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
3