vue 3 动态绑定 class 主用 :class，支持对象、数组、字符串语法，对象和数组最常用；对象语法通过布尔值控制类名开关，数组语法可混合静态类与条件类，二者可与静态 class 叠加使用。
Vue 3 中动态绑定 class 主要用 :class（即 v-bind:class 的简写），支持对象、数组、字符串三种语法，其中对象和数组最常用，也最灵活。
对象语法：按条件开关单个或多个类
用 JavaScript 对象控制类名的有无，键是类名（可加引号），值是响应式布尔表达式或计算结果。
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
- 直接写在模板里：
<div :class="{ active: isActive, 'text-danger': hasError }"></div>，isActive 为真时加 active 类，hasError 为真时加 text-danger 类 - 推荐抽成响应式对象变量，结构更清晰：
const classObj = reactive({ active: true, 'font-bold': isUrgent })，再:class="classObj" - 也可用计算属性返回对象，适合逻辑复杂时：
const finalClass = computed(() => ({ active: isActive.value && !isDisabled.value, disabled: isDisabled.value }))
数组语法：组合多个类，支持嵌套对象
用数组一次性挂载多个类名，适合已知基础类 + 动态增补的场景。
- 纯字符串数组：
:class="[baseClass, statusClass]"，两个 ref 字符串会拼成class="base status" - 数组中混入对象，实现“部分条件控制”：
:class="['base', { active: isActive, hidden: isHidden }]"，base 总存在，active 和 hidden 按需添加 - 避免空字符串干扰：如果某项可能是空字符串（如
errorClass.value = ''），它不会生成 class；但若想确保不渲染无效类，建议统一用对象语法控制
对象与数组共存，还能和静态 class 一起用
它们不是互斥的，可以叠加使用，Vue 会自动合并。
- 静态 class + 动态对象：
<div class="btn" :class="{ primary: isPrimary }"></div>→ 最终可能是class="btn primary" - 静态 class + 动态数组：
<div class="card" :class="['shadow', { rounded: isRounded }]"></div> - 三者合体也行：
class="icon" :class="['size-md', { 'rotate-90': isRotated }]"
小提醒：别踩这些常见坑
- 对象里的类名含短横线（如
text-center）必须加引号，否则 JS 解析报错 - 数组里放对象时，不要写成
{ 'active': isActive }这种带引号的键——虽然语法合法，但没必要，直接{ active: isActive }更简洁 - 避免在模板里写太长的三元表达式判断类名，逻辑一多就难维护，优先用计算属性或 reactive 对象封装
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
