クラスとスタイルのバインディング

最終更新日: 2017年10月15日

データバインディングに対する共通の必要なことは、要素のクラスリストとインラインスタイルを操作していることです。それらは両方属性になるので、それらを v-bind を使用して処理することができます。私達の式で最終的に文字列を計算する必要があります。しかしながら、文字列の連結に関わることは、迷惑なエラーが発生しやすいです。この理由のため、Vue は v-bindclassstyle と一緒に使われるとき、特別な拡張を提供します。文字列に加えて、式はオブジェクトまたは配列も評価することができます。

HTML クラスのバインディング

オブジェクト構文

v-bind:class に動的にクラスを切り替えるオブジェクトを渡すことができます:

<div v-bind:class="{ active: isActive }"></div>

上記の構文は active クラスが存在するかどうかを、データプロパティの isActive true と評価される値かによって決まることを意味します。

オブジェクトに複数の項目を持たせることで、複数のクラスを切り替えることができます。加えて、v-bind:class ディレクティブはプレーンな class 属性と共存できます。 次のようなテンプレートに:

<div class="static"
v-bind:class="{ active: isActive, 'text-danger': hasError }">
</div>

次のようなデータを与えます:

data: {
isActive: true,
hasError: false
}

これは次のように描画されます:

<div class="static active"></div>

isActivehasError が変化するとき、クラスリストはそれに応じて更新されます。例えば、hasErrortrue になった場合、クラスリストは "static active text-danger" になります。

インラインでオブジェクトを束縛する必要はありません:

<div v-bind:class="classObject"></div>
data: {
classObject: {
active: true,
'text-danger': false
}
}

これは同じ結果を描画します。オブジェクトを返す算出プロパティを束縛することもできます。これは一般的で強力なパターンです:

<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'
}
}
}

配列構文

v-bind:class にクラスのリストを適用する配列を渡すことができます:

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

このように描画されます:

<div class="active text-danger"></div>

条件付きリストでクラスを切り替えたい場合、三項演算子式でそれを行うことができます:

<div v-bind:class="[isActive ? activeClass : '', errorClass]"></div>

これは常に errorClass が適用されますが、isActive が truthy (true になりうる)な値のときにだけ activeClass クラスが適用されます。

しかしながら、これは複数条件のクラスがある場合は少し冗長です。なので配列構文内部ではオブジェクト構文も使えます:

<div v-bind:class="[{ active: isActive }, errorClass]"></div>

コンポーネントにおいて

このセクションでは、Vue のコンポーネントの知識を前提としています。それをスキップして後で戻っても構いません。

カスタムコンポーネント上で class 属性を使用するとき、これらのクラスはコンポーネントの root 要素 に追加されます。この要素上に存在するクラスは、上書きされません。

例えば、このコンポーネントを宣言して:

Vue.component('my-component', {
template: '<p class="foo bar">Hi</p>'
})

それを使用するときに、いくつかのクラスを追加したとします:

<my-component class="baz boo"></my-component>

以下の HTML が描画されます:

<p class="foo bar baz boo">Hi</p>

クラスバインディングに対しても同様です:

<my-component v-bind:class="{ active: isActive }"></my-component>

isActive が真となりうるときは、以下の HTML が描画されます:

<p class="foo bar active">Hi</p>

インラインスタイルのバインディング

オブジェクト構文

v-bind:style向けのオブジェクト構文は非常に簡単です。それは、JavaScript オブジェクトを除いては、ほとんど CSS のように見えます。CSS プロパティ名に対して、キャメルケース (camelCase) またはケバブケース (kebab-case: クォート'された) のどちらでも使用することができます:

<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
data: {
activeColor: 'red',
fontSize: 30
}

テンプレートをクリーンにするために、直接 style オブジェクトに束縛するのは、よいアイディアです:

<div v-bind:style="styleObject"></div>
data: {
styleObject: {
color: 'red',
fontSize: '13px'
}
}

また、オブジェクト構文はよくオブジェクトを返す算出プロパティと併せて使用されます。

配列構文

v-bind:style 向けの配列構文は、同じ要素に複数のスタイルオブジェクトを適用することができます:

<div v-bind:style="[baseStyles, overridingStyles]"></div>

自動プリフィックス

v-bind:styleベンダー接頭辞を要求される CSS プロパティを使用するとき、例えば、transform においては、Vue.js は自動的に検出し、適用されるスタイルに適切な接頭辞を追加します。

複数の値

2.3.0 から

2.3 から style プロパティに複数の (接頭辞付き) 値の配列を設定できます。例えば次のようになります:

<div v-bind:style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"></div>

これはブラウザがサポートしている配列の最後の値だけを描画します。この例では、flexbox の接頭されていないバージョンをサポートしているブラウザでは、 display: flex を描画します。