最稳妥写法是使用对象语法动态绑定class，如:class="{ 'active': isActive, 'bg-red-500': hasBg }"，避免数组语法混用；class名含横线需加引号，动态key须校验合法性，优先用computed返回对象，禁用undefined/null作为值。
uni-app里用v-bind:class动态绑定class最稳妥写法
直接用对象语法，别碰数组语法混用——尤其在条件多、class名带横线或变量可能为null/undefined时，数组语法容易静默失效。
常见错误现象：class没生效，控制台无报错，但样式就是不出现；或者某些平台（如微信小程序）渲染异常，H5正常。
- 用对象语法：
:class="{ 'active': isActive, 'text-bold': isBold }"，键是class名，值是布尔表达式 - class名含横线（如
bg-red-500）必须加引号，否则解析成减法：':class="{ \'bg-red-500\': hasBg }"' - 避免在对象里直接写三元表达式嵌套，可先在
data或computed里算好布尔值，更易调试 - 不要把
v-bind:class和class静态属性拆成两个属性，uni-app编译器对合并支持不稳定，统一写进一个:class
在computed里组合class比在模板里硬写更可控
模板里逻辑一复杂，就容易漏括号、引号或搞错优先级，而且没法复用。uni-app的响应式更新机制对计算属性里的对象返回值识别很稳。
使用场景：多个状态共同决定一组class，比如按钮的disabled、loading、type三个字段同时影响外观。
- 定义计算属性：
btnClass() { return { 'btn-disabled': this.disabled, 'btn-loading': this.loading, [`btn-${this.type}`]: this.type } } - 模板中直接用：
:class="btnClass"，注意这里不用{{}}，因为已经是响应式表达式 - 如果需要拼接静态class，写成：
:class="[ 'btn', btnClass ]"，数组内第一项是字符串，第二项是对象，uni-app能正确合并
条件渲染样式时慎用v-if切换class容器
这不是动态绑定，而是靠DOM增删来“换样式”，性能差、动画难做、还容易触发组件重载——尤其在scroll-view或长列表里，卡顿明显。
错误用法示例：
- 真正需要的是同一个元素的class切换，不是两个DOM来回切
- 用
:class配合布尔值，比v-if轻量得多，且保留了过渡动画能力（ - 只有当整个区块内容结构完全不同（比如表单页 vs 成功页），才考虑
v-if，而不是为了换几个class
uni-app跨端时class绑定的兼容性坑
微信小程序基础库低版本、App端nvue、H5三者对class绑定的解析细节不同，尤其涉及空格、重复key、动态key时表现不一致。
典型问题：:class="{ [dynamicName]: true }"在nvue里不生效，或微信小程序里生成了空class属性导致样式错乱。
- 动态key必须确保
dynamicName是合法字符串（非空、不含空格、不以数字开头），建议加校验：dynamicName && typeof dynamicName === 'string' - nvue不支持对象语法中的计算key，只能用
computed提前算出确定的class对象 - 避免在class对象里写
undefined或null作为值，uni-app会把它当true处理（比如{ 'x': someVar }中someVar为null，class仍会被加上） - 真要兼容nvue，优先用
style内联+条件判断，它比class绑定更稳定
最麻烦的其实是class名来自后端或用户输入——这时候连引号包裹都救不了，得先过滤、白名单校验、再进class对象，否则小程序端可能直接编译失败或样式飞掉。
