Vue.js 中动态设置 class 有多种方式，主要包括以下几种：
- 对象语法： 使用 v-bind:class 或简写为 :class 绑定一个对象到元素的 class
属性上。该对象的键是类名，值是一个条件表达式，如果表达式的值为真，则添加对应的类名。
Vue代码：
<div :class="{ active: isActive, error: hasError }"></div>
// 在组件中定义数据或计算属性
export default {
data() {
return {
isActive: true,
hasError: false
}
},
computed: {
customClasses() {
return {
'active-class': this.isActiveCondition,
'error-class': this.hasErrorCondition
};
}
}
}
- 数组语法： 可以将多个类名或类名对象放在数组中，这样可以同时应用多个类名。
Vue代码：
<div :class="['static-class', dynamicClassObject, { special: isSpecial }]"></div>
- 三元运算符（条件判断）： 当只需要根据某个条件简单地切换两个类名时，可以使用三目运算符。
Vue代码：
<div :class="status === 'success' ? 'success-state' : 'error-state'"></div>
- 字符串绑定： 当类名需要基于变量拼接时，可以结合模板字符串来动态生成。
Vue代码：
<div :class="`${baseClass} ${dynamicClass}`"></div>
- 多条件联合判断： 如果有多个条件决定多个类名的添加和移除，可以组合以上方式使用。
Vue代码：
<div :class="[commonClass, {'class-a': conditionA}, {'class-b': conditionB}]"></div>
通过以上这些方式，Vue 能够实现类名根据组件内部状态的变化而动态地添加、删除，从而控制元素样式变化。
