VUE学習の3日目

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

上面的语法表示 active 这个 class 存在与否将取决于数据属性 isActive 的 truthiness。

你可以在对象中传入更多属性来动态切换多个 class。此外，v-bind:class 指令也可以与普通的 class 属性共存。当有如下模板:

次のdataとします.

data: {
  isActive: true,
  hasError: false
}

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

 

当 isActive 或者 hasError 变化时，class 列表将相应地更新。例如，如果 hasError 的值为 true，class 列表将变为 "static active text-danger"。

绑定的数据对象不必内联定义在模板里：

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

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

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