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

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

バインディング HTML クラス

class="{{ className }}" のようなクラスをバインドするために、mustache 展開を使用することができますが、v-bind:class でスタイルで混合させることは推奨されません。1 つまたは他を使用してください。

オブジェクト構文

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

<div class="static" v-bind:class="{ 'class-a': isA, 'class-b': isB }"></div>

data: {
  isA: true,
  isB: false
}

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

<div class="static class-a"></div>

isA と isB が変化するとき、クラスリストはそれに応じて更新されます。例えば、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'
}

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

<div class="class-a class-b"></div>

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

<div v-bind:class="[classA, isB ? classB : '']">

これは常に classA が適用されますが、isB が true のときだけ、classB が適用されます。

しかしながら、これは複数条件のクラスがある場合は少し冗長です。1.0.19+ バージョンでは、配列構文内部にオブジェクト構文を使用することも可能です:

<div v-bind:class="[classA, { classB: isB, classC: isC }]">

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

オブジェクト構文

v-bind:style向けのオブジェクト構文は非常に簡単です。それは、JavaScript オブジェクトを除いては、ほとんど CSS のように見えます。CSS プロパティ名に対して、キャメルケース (caml-case) またはケバブケース (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="[styleObjectA, styleObjectB]">

自動プリフィックス

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

← 算出プロパティ条件付きレンダリング →

ガイド 2.0 1.0 0.12

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

バインディング HTML クラス

オブジェクト構文

配列構文

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

オブジェクト構文

配列構文

自動プリフィックス

ガイド