Vue中的Style与class动态绑定属性

Class与style：

注意：

1.有-的style属性名都要变成驼峰式，比如font-size要变成fontSize

2.绑定元素的时候使用：：style=“{  XXX }”的行式较多 

         

对象的行式：

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

<script>

data(){

  isActive: true,

  hasError: false

}
</script>

结果渲染为：

结果渲染为：

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

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

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

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

<script>

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

</script>

数组的行式：

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

data中的行式： 

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

渲染的结果：

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

如果你也想根据条件切换列表中的 class，可以用三元表达式，也可以写成数组中包含对象的行式

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

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