Vue.js学習Item 6--クラスとスタイルの結合

データバインディングの一般的な需要は、操作要素のクラスリストとその内部連結スタイルです.これらはすべてatributeなので、v-bindでそれらを処理できます.表現の最終的な文字列だけを計算する必要があります.しかし、文字列をつなぎ合わせるのは面倒で間違いやすいです.したがって、v-bindがclassおよびstyleに使用されるとき、Vue.jsは特にそれを強化する.表式の結果の種類は、文字列以外にもオブジェクトまたは配列とすることができます.
HTMLクラスをバインドする
Mustacheタグでクラスをバインドすることができますが、例えば‘%raw’class='{classis Name}'{%endraw%}`、このような書き方と`v-bind:class`混用は勧められません.二つは一つしか選べません.
オブジェクト文法
私たちは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>

条件によってリストのクラスを切り替えたいなら、3元の表現が使えます.

<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の対象文法はとても直観的です.CSSのように見えますが、実はJavaScriptオブジェクトです.CSS属性名は、ラクダピークまたは短い横分割で命名することができます.

<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の配列構文は、複数のスタイルオブジェクトを1つの要素に適用することができる.

<div v-bind:style="[styleObjectA, styleObjectB]">

プレフィックスの自動追加v-bind:styleがベンダープレフィックスが必要なCSS属性を使用すると、transformのように、Vue.jsは自動的に検出し、対応するプレフィックスを追加する.