Vue.js :class 指令 - 动态绑定 HTML 元素的类名

:class 是 Vue 中的一个指令，用于动态绑定 HTML 元素的 class 属性。它可以接收一个对象、一个数组或一个字符串作为参数。

1. 对象语法

:class='{class1: condition1, class2: condition2}'

当 condition1 为 true 时，元素会拥有 class1 类名；当 condition2 为 true 时，元素会拥有 class2 类名。

2. 数组语法

:class='[class1, class2, ...]'

元素会拥有 class1、class2 等所有类名。

3. 字符串语法

:class='class1 + ' ' + class2'

元素会拥有 class1 和 class2 两个类名。

:class 还支持在绑定时使用三元表达式、对象展开符等语法，以实现更丰富的 class 绑定方式。