Vue.jsスタイル(style)のバインディング

Vue.js class

classとstyleはHTML要素の属性(プロパティ)であり、要素のスタイル(style)を設定するために使用されます。v-bindを使用してstyle属性(プロパティ)を設定できます。

Vue.js v-bindは、classとstyleを処理するときに特別に拡張されています。文字列以外、表現式の結果はオブジェクトまたは配列を返すことができます。

class属性にバインディングする

v-bind:classにオブジェクトを設定して、classを動的に切り替えることができます。

例1

この例では、isActiveをtrueに設定すると、緑色のdivブロックが表示されます。falseに設定すると、表示されません。

<div v-bind:class="{ 'active': isActive }"></div>

上記のdiv classは

<div class="active"></div>

オブジェクトにさらに多くの属性を渡して、複数のクラス(class)を動的に切り替えることもできます。

例2

text-dangerクラスの背景色は、activeクラスの背景色を上書きします。

<div class="static" v-bind:class="{ 'active' : isActive, 'text-danger' : hasError }"> </div>

上記のdiv classは

<div class="static active text-danger"></div>

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

例3

text-dangerクラスの背景色は、activeクラスの背景色を上書きします。

<div id="app"> <div v-bind:class="classObject"></div> </div>

例3と例2のレンダリング結果は同じです。

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

例4

new Vue({
  el: '#app',
  data: {
    isActive: true,
    error: {
      value: true,
      type: 'fatal'
    }
  },
  computed: {
    classObject: function () {
      return {
  base: true,
        active: this.isActive && !this.error.value,
        'text-danger': this.error.value && this.error.type === 'fatal',
      }
    }
  }
})

配列構文

配列をv-bind:classに渡すことができます。例は次のとおりです。

例5

<div v-bind:class="[activeClass, errorClass]"></div>

上記のdiv classは

<div class="active text-danger"></div>

三項演算子式を使用して、リスト内のクラスを切り替えることもできます。

例6

errorClassは常に存在し、isActiveがtrueの場合はactiveClassクラスを追加します。

<div v-bind:class="[errorClass ,isActive ? activeClass : '']"></div>

Vue.jsスタイル（インラインスタイル）

v-bind:styleで直接スタイルを設定できます。

例7

<div id="app"> <div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">Florian Studio</div> </div>

上記のdiv classは

<div style="color: green; font-size: 30px;">Florian Studio</div>

スタイルオブジェクトに直接バインドして、テンプレートをより明確にすることもできます。

例8

<div id="app"> <div v-bind:style="styleObject">Florian Studio</div> </div>

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

例9

<div id="app"> <div v-bind:style="[baseStyles, overridingStyles]">Florian Studio</div> </div>

注意点: v-bind:styleを使用する際に、transformなどの特定のCSSプロパティを先頭に必要とする場合、Vue.jsは対応する接頭辞を自動的に検出して追加します。