データ バインディングの一般的な要件は、要素の CSS クラス リストとインライン スタイルを操作することです。class と style は属性であるため、v-bind を使用して、他の属性と同様に動的文字列にバインドできます。ただし、より複雑なバインディングを扱う場合、連結による文字列の生成は面倒でエラーが発生しやすくなります。したがって、Vue は、クラスとスタイルの v-bind の使用に特化した特別な機能拡張を提供します。文字列に加えて、式の値はオブジェクトまたは配列にすることもできます。
バインディングクラス
バインディングオブジェクト
オブジェクトを :class (v-bind:class の略) に渡して、クラスを動的に切り替えることができます。
<div :class="{ active: isActive }"></div>
上記の構文は、active の存在がデータ属性 isActive の true または false の値に依存することを示しています。
オブジェクトに複数のフィールドを記述して、複数のクラスを操作できます。さらに、:class ディレクティブは通常のクラス属性と共存することもできます。たとえば、次のようなステータスです。
data() {
return {
isActive: true,
hasError: false
}
}
次のテンプレートと組み合わせて使用します。
<div
class="static"
:class="{ active: isActive, 'text-danger': hasError }"
></div>
レンダリングされた結果は次のようになります。
<div class="static active"></div>
isActive または hasError が変更されると、それに応じてクラス リストが更新されます。たとえば、hasError が true になると、クラス リストも「static active text-danger」になります。
バインドされたオブジェクトは、必ずしもインライン リテラルの形式で記述する必要はありません。オブジェクトを直接バインドすることもできます。
data() {
return {
classObject: {
active: true,
'text-danger': false
}
}
}
<div :class="classObject"></div>
これでも同じ結果が得られます。返されたオブジェクトの計算されたプロパティをバインドすることもできます。これは一般的で便利なトリックです。
data() {
return {
isActive: true,
error: null
}
},
computed: {
classObject() {
return {
active: this.isActive && !this.error,
'text-danger': this.error && this.error.type === 'fatal'
}
}
}
<div :class="classObject"></div>
バインディング配列
配列を :class にバインドして、複数の CSS クラスをレンダリングできます。
data() {
return {
activeClass: 'active',
errorClass: 'text-danger'
}
}
<div :class="[activeClass, errorClass]"></div>
レンダリングされた結果は次のとおりです。
<div class="active text-danger"></div>
配列内のクラスを条件付きでレンダリングする場合も、三項式を使用できます。
<div :class="[isActive ? activeClass : '', errorClass]"></div>
errorClass は常に存在しますが、activeClass は isActive が true の場合にのみ存在します。
ただし、複数の依存クラスがある場合、これは少し冗長になる可能性があります。したがって、配列内でオブジェクトをネストすることも可能です。
<div :class="[{ active: isActive }, errorClass]"></div>
コンポーネントで使用する
ルート要素が 1 つだけあるコンポーネントの場合、class 属性を使用すると、これらのクラスがルート要素に追加され、要素上の既存のクラスとマージされます。
たとえば、MyComponent という名前のコンポーネントを宣言する場合、テンプレートは次のようになります。
<!-- 子组件模板 -->
<p class="foo bar">Hi!</p>
使用する場合は、いくつかのクラスを追加します。
<!-- 在使用组件时 -->
<MyComponent class="baz boo" />
レンダリングされた HTML は次のとおりです。
<p class="foo bar baz boo">Hi!</p>
クラスのバインディングは同じです。
<MyComponent :class="{ active: isActive }" />
isActive が true の場合、レンダリングされる HTML は次のようになります。
<p class="foo bar active">Hi!</p>
コンポーネントに複数のルート要素がある場合は、どのルート要素がこのクラスを受け取るかを指定する必要があります。これは、コンポーネントの $attrs 属性を通じて指定できます。
<!-- MyComponent 模板使用 $attrs 时 -->
<p :class="$attrs.class">Hi!</p>
<span>This is a child component</span>
<MyComponent class="baz" />
これは次のようにレンダリングされます。
<p class="baz">Hi!</p>
<span>This is a child component</span>
インラインスタイルスタイルをバインド
バインディングオブジェクト
:style は、HTML 要素の style 属性に対応する JavaScript オブジェクト値のバインディングをサポートします。
data() {
return {
activeColor: 'red',
fontSize: 30
}
}
<div :style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
キャメルケースが推奨されていますが、:style は、CSS プロパティ キー (CSS の実際の名前に対応) のケバブケース形式もサポートしています。次に例を示します。
<div :style="{ 'font-size': fontSize + 'px' }"></div>
多くの場合、テンプレートをすっきりさせるためにスタイル オブジェクトを直接バインドすることをお勧めします。
data() {
return {
styleObject: {
color: 'red',
fontSize: '13px'
}
}
}
<div :style="styleObject"></div>
同様に、スタイル オブジェクトでより複雑なロジックが必要な場合は、スタイル オブジェクトを返す計算プロパティを使用することもできます。
バインディング配列
複数のスタイル オブジェクトを含む配列を :style にバインドすることもできます。これらのオブジェクトはマージされ、同じ要素上にレンダリングされます。
<div :style="[baseStyles, overridingStyles]"></div>