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


ディレクトリ


#バインド HTML クラス

オブジェクト構文


v- を渡すことができます。 bind:class

動的にクラスを切り替えるオブジェクト: 

<div v-bind:class="{ active: isActive }"></div>
上記の構文は、 active

を意味します。 クラスが存在するかどうかは、データの

truthiness によって決まります。属性 isActive。 オブジェクト内でさらに多くの属性を渡して、複数のクラスを動的に切り替えることができます。さらに、v-bind:class

ディレクティブは、通常のクラス属性と共存することもできます。次のテンプレート: 

<div
  class="static"
  v-bind:class="{ active: isActive, 'text-danger': hasError }"
></div>
と次のデータ: 
data: {
  isActive: true,
  hasError: false
}

がある場合、結果は次のように表示されます:

isActive

または

hasError

変更すると、それに応じてクラス リストが更新されます。たとえば、

hasError が true と評価された場合、クラス リストは "static active text-danger" になります。 バインドされたデータ オブジェクトは、テンプレート内でインラインで定義する必要はありません: 

<div class="static active"></div>
<div v-bind:class="classObject"></div>
レンダリング結果は上記と同じです。ここで、返されたオブジェクトの 計算プロパティ

をバインドすることもできます。これは一般的で強力なパターンです: 

data: {
  classObject: {
    active: true,
    'text-danger': false
  }
}
<div v-bind:class="classObject"></div>

配列構文

配列パスを置くことができます。これを v-bind:class に変更して、クラス リストを適用します。 

data: {
  isActive: true,
  error: null
},
computed: {
  classObject: function () {
    return {
      active: this.isActive && !this.error,
      'text-danger': this.error && this.error.type === 'fatal'
    }
  }
}
<div v-bind:class="[activeClass, errorClass]"></div>

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

data: {
  activeClass: 'active',
  errorClass: 'text-danger'
}
に基づいてリスト内のクラスを切り替える場合も、 
<div class="active text-danger"></div>

このように書くと常に

errorClass

が追加されますが、

isActive

が truey

[1 の場合に限ります。 ] activeClass のみを追加します。 ただし、条件クラスが複数ある場合にこのように書くのは少し面倒です。したがって、オブジェクト構文は配列構文でも使用できます。 

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

コンポーネントでの使用

この章は、読者が Vue コンポーネントについてすでに学習していることを前提としています。 ある程度の知識を持ってください。もちろん、ここをスキップして、後で戻ってくることもできます。

カスタム コンポーネントで class 属性を使用する場合、これらのクラスはコンポーネントのルート要素に追加されます。この要素にすでに存在するクラスは上書きされません。

たとえば、このコンポーネントを宣言した場合: 

<div v-bind:class="[{ active: isActive }, errorClass]"></div>

、それを使用するときにいくつかのクラスを追加します: 

Vue.component('my-component', {
  template: '<p class="foo bar">Hi</p>'
})

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

<my-component class="baz boo"></my-component>

データ バインディングを持つクラスにも同じことが当てはまります: 

<p class="foo bar baz boo">Hi</p>

isActive が truey[1] の場合、HTML はレンダリングされます: 

<my-component v-bind:class="{ active: isActive }"></my-component>


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

オブジェクト構文# のオブジェクト構文

##v-bind:style は非常に直感的です。CSS に非常によく似ていますが、実際には JavaScript オブジェクトです。 CSS プロパティ名は、キャメルケースまたはケバブケースで名前を付けることができます (引用符で囲むことを忘れないでください): 

<p class="foo bar active">Hi</p>
<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>

通常は、スタイル オブジェクトに直接バインドすることをお勧めします。これにより、テンプレートがより明確になります: 

data: {
  activeColor: 'red',
  fontSize: 30
}
<div v-bind:style="styleObject"></div>

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


配列構文

v-bind:style の配列構文は OK 複数のスタイル オブジェクトを同じ要素に適用します: 

data: {
  styleObject: {
    color: 'red',
    fontSize: '13px'
  }
}


プレフィックスを自動的に追加します

When

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


#複数の値##2.3.0

送信元2.3.0 以降では、

style
バインディングでプロパティの複数の値を含む配列を指定できます。これは、複数の接頭辞付きの値を指定するためによく使用されます。たとえば、次のように記述します。 this ブラウザでサポートされている配列の最後の値のみがレンダリングされます。この例では、ブラウザがブラウザ接頭辞のないフレックスボックスをサポートしている場合、

display: flex のみがレンダリングされます。

翻訳者注記


[1] 真実は

true ではありません。詳しくは MDN# を参照してください。詳細 ## の説明。