【无标题】vue动态绑定class

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需要加上单引号，否则不能正确渲染出效果