Vue中的样式绑定的三种方式

：class 绑定一个对象

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

data: {
  isActive: true
}

也可直接在data中定义对象

<div :class="classObject">text</div>

data: {
  classObject: {
	activate: true
  }
}

除了绑定对象还可绑定数组

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

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

渲染为

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

第三种则是方便的style方式，更加直观

<div :style="styleObject">text</div>

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

注意对象使用与computed食用更佳