vue的class和:class

Vue中的class和:class都是用于动态绑定class属性的指令，可以根据数据的变化来动态改变元素的class属性。

1. :class指令可以绑定一个对象，对象的属性名是class名称，属性值是一个布尔值，true表示添加该class，false表示移除该class。例如：

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

当isActive为true时，该元素会添加active类；当isActive为false时，该元素会移除active类。

2. :class指令也可以绑定一个数组，数组的元素可以是字符串、对象或数组。例如：

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

其中activeClass和errorClass都是字符串，表示class名称。当activeClass和errorClass都存在时，该元素会同时添加这两个class。

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

数组元素也可以是对象，对象的属性名是class名称，属性值是一个布尔值或者一个返回布尔值的表达式。例如：

<div :class="[{'active': isActive}, {'text-danger': hasError && !isActive}]"></div>

当isActive为true时，该元素会添加active类；当hasError为true且isActive为false时，该元素会添加text-danger类。

3. class属性可以直接绑定一个字符串，字符串中可以包含表达式。例如：

<div class="static" :class="[isActive ? activeClass : '', errorClass]" :style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>

其中static是静态的class，不会随着数据的变化而改变；activeClass和errorClass是动态的class，会根据isActive和hasError的值来动态改变；:style指令可以绑定一个对象，对象的属性名是样式名称，属性值是样式值，可以是一个表达式。