Vueベース(ClassとStyleのバインド)

操作要素のclassリストとインラインスタイルは、データバインドの一般的な要件です.これらはすべて属性なので、v-bindで処理できます.式で文字列の結果を計算するだけです.ただし、文字列の継ぎ目は面倒で間違いやすい.したがって、v-bindをclassおよびstyleに用いる場合、Vue.jsは専門的な強化をした.式の結果のタイプは、文字列のほかにオブジェクトまたは配列であってもよい.
バインドHTML Class(1)オブジェクト構文1、v-bind:classオブジェクトに渡すことで、classを動的に切り替えることができます.

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

上記の構文は、activeというclassが存在するかどうかが、データ属性isActiveのtruthinessに依存することを示しています.
2、オブジェクトにより多くのプロパティを入力して、複数のclassを動的に切り替えることができます.さらに、v-bind:class命令は、通常のclass属性と共存してもよい.次のテンプレートがあります.

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

次のdataとします.

data: {
  isActive: true,
  hasError: false
}

結果は次のようにレンダリングされます.
isActiveまたはhasErrorが変化すると、classリストが更新されます.たとえばhasErrorの値がtrueの場合、classリストは「static active text-danger」になります.
3、バインドされたデータオブジェクトは、テンプレートに組み込まれて定義する必要はありません.

<div v-bind:class="classObject">div>

data: {
  classObject: {
    active: true,
    'text-danger': false
  }
}

4、レンダリングの結果は上と同じです.ここでは、オブジェクトを返す計算プロパティをバインドすることもできます.これは一般的で強力なモードです.

<div v-bind:class="classObject">div>

data: {
  isActive: true,
  error: null
},
computed: {
  classObject: function () {
    return {
      active: this.isActive && !this.error,
      'text-danger': this.error && this.error.type === 'fatal'
    }
  }
}

配列構文1、classリストを適用するために、v-bind:classに配列を渡すことができます. >

data: {
  activeClass: 'active',
  errorClass: 'text-danger'
}

レンダリング:

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

2、条件に応じてリストのclassを切り替えたい場合は、3元式を使用します.

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

このように書くと常にerrorClassが追加されますが、isActiveがtruthy[1]の場合にのみactiveClassが追加されます.
3、しかし、複数の条件classがある場合、このように書くのは少し面倒です.したがって、配列構文では、オブジェクト構文も使用できます.

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

コンポーネントでclassプロパティをカスタムコンポーネントで使用すると、これらのクラスがコンポーネントのルート要素に追加されます.この要素にすでに存在するクラスは上書きされません.
たとえば、このコンポーネントを宣言した場合:

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

次に、使用時にclassを追加します.

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

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

<p class="foo bar baz boo">Hip>

データバインド付きclassについても同様に適用されます.

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

isActiveがtruthy[1]の場合、HTMLは次のようにレンダリングされます.

<p class="foo bar active">Hip>

バインドインラインスタイル(1)オブジェクト構文v-bind:styleのオブジェクト構文は直感的です.CSSによく似ていますが、JavaScriptオブジェクトです.CSSプロパティ名は、キャメル(camelCase)または短い横線で区切られた(kebab-case、単一引用符で囲まれた)名前で指定できます.

<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の配列構文は、複数のスタイルオブジェクトを同じ要素に適用します.

<div v-bind:style="[baseStyles, overridingStyles]">div>

自動接頭辞v-bind:styleがブラウザエンジンの接頭辞を追加する必要があるCSS属性を使用する場合、transform,Vue.jsは自動的に検出され、対応する接頭辞が追加されます.
多重値2.3.0からstyleバインドのプロパティに複数の値を含む配列を指定できます.たとえば、次のように、接頭辞付きの複数の値を指定するのによく使用されます.

:style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }">

このように書くと、配列の最後のブラウザでサポートされている値だけがレンダリングされます.この例では、ブラウザがブラウザ接頭辞を持たないflexboxをサポートしている場合、display:flexのみがレンダリングされます.