Vue.js で HTML の属性を変更したい場合は v-bind を使用します。
以下、公式ドキュメントを自分なりにまとめなおしただけです。
基本
例えば、class の値を変更したい場合は以下のように記述します。
<div v-bind:class="status"></div>
data: {
status: 'active',
}
展開後
<div class="active"></div>
条件指定（オブジェクト構文）
属性の出力を条件分岐させたい場合、以下のようなオブジェクト構文を使用します。
<div v-bind:class="{ active: isActive }"></div>
data: {
isActive: true,
}
active クラスの出力は、data プロパティの isActive の値によって決まります。{出力したい属性: 条件式} です。
展開後
isActive が true の場合
<div class="active"></div>
isActive が false の場合
<div class=""></div>
属性値がハイフンを含む場合
注意点として、クラスの属性値がハイフン - を含む場合は、シングルコーテーション ' で括る必要があるようです。
<div v-bind:class="{ 'text-danger': isActive }"></div>
data: {
isActive: true,
}
オブジェクトとのバインド
上記はインラインでバインドを記述していますが、以下のように記述することもできます。
<div v-bind:class="classObject"></div>
data: {
classObject: {
active: true,
'text-danger': true
}
}
展開後
<div class="active text-danger"></div>
computed プロパティとのバインド
条件は data プロパティ以外に、computed プロパティとバインドすることもできます。
<div v-bind: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'
}
}
}
展開後
<div class="active"></div>
静的フィールドとの共存
既に静的に class が記述してあっても、Vue.js の v-bind と共存できます。
<div class="static" v-bind:class="status"></div>
data: {
status: 'active',
}
展開後
<div class="static active"></div>
配列構文
配列を渡してクラスのリストを適用することもできます。
<div v-bind:class="[activeClass, errorClass]"></div>
data: {
activeClass: 'active',
errorClass: 'text-danger'
}
展開後
<div class="active text-danger"></div>
