それぞれstringを返すなら以下のようにclassを付与できます
なお:class
はv-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'
}
}
}