LoginSignup
11
8

More than 3 years have passed since last update.

Vue.jsで動的な複数のclassを指定する時の書き方

Last updated at Posted at 2020-06-04

それぞれstringを返すなら以下のようにclassを付与できます
なお:classv-bind:classの省略記法です

<div :class="[activeClass, errorClass]"></div>
data: {
  activeClass: 'active',
  errorClass: 'text-danger'
}

また、Vueはbooleanな値を使って以下のようにclassを付け替えすることもできます

<div :class="{ 'active': isActive }"></div>
data: {
  isActive: true
}

以上2つの指定方法が混在しているDOMについては以下のように纏められます。

<div :class="[activeClass, errorClass, { active: isActive }]"></div>
data: {
  activeClass: 'active',
  errorClass: 'text-danger',
  isActive: true
}

配列の形でそれぞれの指定方法に則って記述するだけですね。

また、この指定方法ではDOMにロジックが寄って見通しが悪くなることが考えられます。
その場合、算出プロパティを用いて付与するクラスをまとめると良いでしょう。
同様なロジックが存在している場合にも、算出プロパティは変更がある場合のみ再計算してそれ以外はキャッシュして返してくれるのでパフォーマンスの面でも優れます。

<div :class="classObject"></div>
data: {
  isActive: true,
  error: null
},
computed: {
  classObject: function () {
    return {
      active: this.isActive && !this.error,
      'text-danger': this.error && this.error.type === 'fatal'
    }
  }
}
11
8
0

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
  3. You can use dark theme
What you can do with signing up
11
8