Vue 绑定class和style方式1.绑定Class1.1直接方式应用场景：类名不确定是哪个1.2绑定对象方式cla

<div v-bind:class="active"></div>
//active为变量

应用场景：类名不确定是哪个

<div v-bind:class="{ active: isActive }"></div>
//active为字符串

class是否为active取决于isActive的真假

应用场景：类名确定，但不确定是否存在

class不会冲突

<div
  class="static"
  v-bind:class="{ active: isActive, 'text-danger': hasError }"
></div>
//绑定对象方式中带有连字符的字符串需要加引号 'text-danger'

data: {
  isActive: true,
  hasError: true
}

结果为

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

<div v-bind:class="[activeClass, 'classA']"></div>
//"[这里即为javascript语法区域]，故activeClass为变量，classA为字符串"

data: {
  activeClass: 'active',
}

结果为

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

1.5 组件上绑定

自定义组件内使用和在组件的根元素上绑定不会冲突，可以叠加

<div v-bind:style="styleObject"></div>

data: {
  styleObject: {
    color: 'red',
    fontSize: '13px'
  }
}

绑定的是一个 JavaScript 对象

<div v-bind:style="{ color: myColor, fontSize: mySize + 'px' }"></div>

data: {
  myColor: 'red',
  mySize: 30
}

可以将多个样式对象应用到同一个元素上

<div v-bind:style="[stylesOne, stylesTwo]"></div>