经常看到一些同事写出这样的代码：

<div :class="isActive ? 'active' : ''"></div>

意图很明显，当 isActive 为 true 时，给该 div 增加一个 class active 。这样写并没什么错误，但其实 Vue 为我们提供了通过传递一个对象来动态切换 class 的能力，上面的代码可以写成：

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

一个明显的好处是，当代码逻辑变得复杂后，第二种写法更便于写出简洁的代码。如：

<div :class="isActive && (foo='a' || foo='b' || foo='c') ? 'active' : ''"
       :class="isDisabled ? 'disabled' : ''"></div>

可以配合使用 includes 的小技巧写成：

<!-- 堆代码 duidaima.com -->
<div :class="{ 
        active: isActive && ['a','b','c'].includes(foo), 
        disabled: isDisabled
}"></div>