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
}

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

99d51369971cdd131f2a9bd749fc570d16b28748ea4df4d9c2150843fecfba68

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

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

6381379ba499c30048a04f5c0c3b7337

条件に基づいてリスト内のクラスを切り替えたい場合は、次の三項式を使用できます:

553bc69dbc41318ba8384ef81760283f

bind inline Style

オブジェクト構文

v-bind: style のオブジェクト構文は非常に直感的です。CSS に非常によく似ていますが、実際には JavaScript オブジェクトです。 CSS プロパティ名は、キャメルケースまたはケバブケースで名前を付けることができます:

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

同様に、オブジェクト構文は組み合わせて使用​​されることがよくあります。オブジェクトを返す計算されたプロパティを使用します。

配列構文

v-bind:style の配列構文は、複数のスタイル オブジェクトを 1 つの要素に適用できます:

421c6b16fe9da600b2e70d8ca65705da

自動的に追加されるプレフィックス

の場合v-bind:style は、transform などのベンダー プレフィックスを必要とする CSS プロパティを使用します。Vue.js は、対応するプレフィックスを自動的に検出して追加します。

以上がこの記事の全内容です。皆さんの学習に役立つことを願っています。また、皆さんも PHP 中国語 Web サイトをサポートしていただければ幸いです。

Vue.js で毎日学習する必要があるクラスとスタイル バインディングに関連するその他の記事については、PHP 中国語 Web サイトに注目してください。