class 与 style 如何动态绑定

class 与 style 动态绑定一般通过对象或者数组来实现。

对象写法：适用于要绑定的样式名字样式确定，但动态决定用不用。

数组写法：适用于要绑定的样式名字样式不确定。

1.class对象写法

      可以传给v-bind:class一个对象，以动态地切换class

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

   在对象中可传入更多字段来动态切换多个class，此外，v-bind：class指令也可以与普通的class attribute(属性)共存。如下：

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

    和data如下：

data: {
  isActive: true,
  hasError: false
}

 结果渲染为:

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

2..class数组写法

我们可以把一个数组传给v-bind:class，以应用一个class列表：

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

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

渲染为：

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

如果想根据条件切换列表中的class，可以用三元表达式子:

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

 这样写将始终添加errorClass，但是只有在isActive是trrue时才添加activeClass

1. style对象写法

  v-bind:style 的对象语法十分直观——看着非常像 CSS，但其实是一个 JavaScript 对象

<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'
  }
}

2.style数组语法

   v-bind:style 的数组语法可以将多个样式对象应用到同一个元素上。

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