Help us understand the problem. What is going on with this article?

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.

参考

https://jp.vuejs.org/v2/guide/class-and-style.html

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした