データ バインディングの一般的な要件は、要素のクラス リストとそのインライン スタイルを操作することです。これらはすべて属性であるため、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="{ 'class-a': isA, 'class-b': 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: {
'class-a': true,
'class-b': false
}
}ここで、返されたオブジェクトの計算されたプロパティをバインドすることもできます。これは一般的に使用される強力なパターンです。
配列構文
配列を v-bind:class に渡してクラス リストを適用できます。
<div v-bind:class="[classA, classB]">
data: {
classA: 'class-a',
classB: 'class-b'
}次のようにレンダリングされます:
条件に基づいてリスト内のクラスを切り替えたい場合は、次の三項式を使用できます:
この例では常に classA が追加されますが、isB が true の場合にのみ classB が追加されます。
ただし、条件クラスが複数ある場合にこのように書くのは少し面倒です。 1.0.19 以降では、配列構文内でオブジェクト構文を使用できます:
bind inline Style
オブジェクト構文
v-bind: style のオブジェクト構文は非常に直感的です。CSS に非常によく似ていますが、実際には JavaScript オブジェクトです。 CSS プロパティ名は、キャメルケースまたはケバブケースで名前を付けることができます:
<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
data: {
activeColor: 'red',
fontSize: 30
}テンプレートをわかりやすくするために、通常はスタイル オブジェクトに直接バインドすることをお勧めします:
<div v-bind:style="styleObject"></div>
data: {
styleObject: {
color: 'red',
fontSize: '13px'
}
}同様に、オブジェクト構文は組み合わせて使用されることがよくあります。オブジェクトを返す計算されたプロパティを使用します。
配列構文
v-bind:style の配列構文は、複数のスタイル オブジェクトを 1 つの要素に適用できます:
自動的に追加されるプレフィックス
の場合v-bind:style は、transform などのベンダー プレフィックスを必要とする CSS プロパティを使用します。Vue.js は、対応するプレフィックスを自動的に検出して追加します。
以上がこの記事の全内容です。皆さんの学習に役立つことを願っています。また、皆さんも PHP 中国語 Web サイトをサポートしていただければ幸いです。
Vue.js で毎日学習する必要があるクラスとスタイル バインディングに関連するその他の記事については、PHP 中国語 Web サイトに注目してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
