Vue.js で毎日学ぶ必要があるクラスとスタイル バインディング

データ バインディングの一般的な要件は、要素のクラス リストとそのインライン スタイルを操作することです。これらはすべて属性であるため、v-bind を使用してそれらを処理できます。式の最後の文字列を評価するだけで済みます。ただし、文字列の連結は面倒でエラーが発生しやすくなります。したがって、Vue.js は、クラスおよびスタイルとともに使用される場合に特に v-bind を強化します。文字列に加えて、式の結果の型はオブジェクトまたは配列にすることもできます。

HTML クラスのバインド

`{% raw %}class=”{{ className }}”{% endraw %}` など、Mustache タグを使用してクラスをバインドすることもできますが、この書き方はお勧めしません。と `v -bind:class` が混在しています。 2 つのうち 1 つしか選択できません。

オブジェクト構文

v-bind:class にオブジェクトを渡して、クラスを動的に切り替えることができます。 v-bind:class ディレクティブは通常のクラス属性と共存できることに注意してください:

<div class="static" v-bind:class="{ &#39;class-a&#39;: isA, &#39;class-b&#39;: isB }"></div>
 
data: {
 isA: true,
 isB: false
}

は次のようにレンダリングされます:

when isA and isB change に応じてクラスリストが更新されます。たとえば、isBがtrueになると、クラスリストは「static class-a class-b」になります。

データ内のオブジェクトを直接バインドすることもできます:

<div v-bind:class="classObject"></div>
 
data: {
 classObject: {
 &#39;class-a&#39;: true,
 &#39;class-b&#39;: false
 }
}

ここで、返されたオブジェクトの計算されたプロパティをバインドすることもできます。これは一般的に使用される強力なパターンです。

配列構文

配列を v-bind:class に渡してクラス リストを適用できます。

<div v-bind:class="[classA, classB]">
 
data: {
 classA: &#39;class-a&#39;,
 classB: &#39;class-b&#39;
}

次のようにレンダリングされます:

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

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