数组语法
我们可以把一个数组传给 :class，以应用一个 class 列表：

<div :class="[activeClass, errorClass]"></div>
data() {
  return {
    activeClass: 'active',
    errorClass: 'text-danger'
  }
}

渲染的结果为：

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

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

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

这样写将始终添加 errorClass，但是只有在 isActive 为 truthy[1] 时才添加 activeClass。
不过，当有多个条件 class 时这样写有些繁琐。所以在数组语法中也可以使用对象语法：

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

也可以是一个动态变量

data() {
  return {
    obj: [{calss: 'errorClass'}]
  }
}
<div v-for="item in obj">
	<div :class="[activeClass , item.class]"></div>
<div/>

渲染的结果为：

<div v-for="item in obj">
	<div class="activeClass  errorClass"></div>
<div/>