1.最简单的绑定
v-bind:class="{ active: isActive }"，可简写为 :class="{ active: isActive }"
2.多个样式的绑定
:class="{ active: isActive, 'text-danger': hasError }" data中则需显示一个为true，一个为false data: { isActive: true, hasError: true }
3.直接绑定数据的一个对象
:class="classObject" data中只需显示：classObject: { active: true, 'text-danger': true }
4.数组样式
:class="[activeClass, errorClass]" data: { activeClass: 'active', errorClass: 'text-danger' } 显示的结果为样式的覆盖，哪个样式在最后显示哪个
5.三元表达式切换样式
:class="[errorClass ,isActive ? activeClass : '']" data: { isActive: true, activeClass: 'active', errorClass: 'text-danger' } 注意：三元运算符后的“：”前后的class需要加上单引号，否则不能正确渲染出效果
