uni-app中动态切换按钮类名需用:class绑定data中声明的响应式状态，如:class="{ 'active-btn': isActive }"，确保isActive在data()中初始化为false，点击事件中通过this.isActive = !this.isActive更新。
uni-app里怎么用v-bind:class动态切换按钮类名
直接用v-bind:class（简写为:class）就行，但要注意 uni-app 的 Vue 版本是 2.x，不支持 Vue 3 的响应式语法，ref或reactive定义的状态必须是顶层响应式对象属性，否则 class 不会更新。
常见错误是把开关状态写在data()外、或用let isActive = ref(false)（Vue 2 不认ref），结果点击没反应。
- 状态必须声明在
data()返回的对象里，比如isActive: false -
:class值推荐用对象语法：:class="{ 'active-btn': isActive }" - 避免用数组语法拼字符串，容易漏空格或覆盖默认 class
- 如果同时有静态 class，直接并列写：
class="btn" :class="{ 'btn-primary': isActive }"
点击事件里怎么正确修改 class 绑定的状态
uni-app 的@click和 Vue 2 完全一致，但新手常犯的错是：在方法里写了this.isActive = !this.isActive，却忘了isActive根本没在data里定义——运行时不报错，但 class 死活不更新。
另外，别用let/const在 methods 里重新声明同名变量，那只是局部变量，改不动响应式数据。
- 确保
data()里已定义：return { isActive: false } - 点击方法中写
this.isActive = !this.isActive即可 - 如需多个按钮独立控制，用数组或对象存状态，比如
btnStates: { btn1: false, btn2: false }，绑定时写:class="{ active: btnStates.btn1 }"
用computed生成 class 适合什么场景
当 class 名称逻辑变复杂（比如根据后端返回的 status 字段映射不同样式），或者要复用同一套判断逻辑时，computed比在模板里堆三元表达式更清晰、易测。
注意 uni-app 中computed必须写在组件选项里，不能写在data或methods内部；且依赖的数据必须是响应式的（即来自data）。
- 例如：
btnClass() { return this.status === 'success' ? 'btn-success' : this.status === 'error' ? 'btn-error' : 'btn-default' } - 模板中直接写
:class="btnClass" - 不要在
computed里调用this.$nextTick或异步操作，它只适合同步计算
真机调试时 class 切换失效的几个隐藏坑
开发工具里看着好好的，一上真机就失灵，大概率不是语法问题，而是平台差异或构建缓存导致的。
最典型的是：H5 端正常，但微信小程序里 class 没变——因为小程序 template 编译对动态 class 的 key 值敏感，如果:class绑定的是一个未初始化的 undefined 属性，某些版本会静默忽略整个绑定。
- 务必初始化所有用于 class 绑定的 data 属性，哪怕初始值是
false或'' - 检查是否启用了
uni-app的“自定义组件模式”，开启后部分 class 绑定行为会受限，建议关闭测试 - 清除微信开发者工具缓存 + 重新编译，有时旧的 wxss 没刷新，样式看起来没变
- 避免在 class 名里用连字符开头（如
-highlight），小程序不支持这类非法标识符
动态 class 看似简单，但跨端一致性是最容易被轻视的一环——哪怕一个data字段少写个初始值，在某个平台就可能完全不触发响应。
