UniApp小程序端不支持:class中使用过滤器，因小程序模板解析器无法执行运行时函数调用；必须改用对象语法，如:class="{ 'active': isActive }"，并提前在computed或data中完成逻辑计算。
uni-app 里不能用过滤器动态绑定 class 类名 —— 这不是写法问题，是平台限制导致的语法失效。小程序端模板解析器不支持 v-bind:class 中调用过滤器函数，H5 虽能跑通，但跨平台项目一旦上线微信/支付宝/抖音小程序，就会直接报错或静默失效。
为什么过滤器在 :class 里会挂掉
uni-app 编译到小程序时，模板会被转成 JSON 结构 + 渲染逻辑，而过滤器（Vue.filter）本质是运行时函数调用，小程序环境没有完整的 Vue 运行时上下文，无法执行 {{ item.type | typeClass }} 这类管道表达式。常见错误信息：Template syntax error: Invalid expression 或 Method calls are not supported in data binding。
:class 绑定必须用对象语法，别碰过滤器
所有动态 class 场景统一走对象语法，且值必须是布尔值或可被 Vue 响应式系统识别的简单表达式：
- ✅ 正确：
:class="{ 'active': isActive, 'btn-primary': type === 'primary' }" - ❌ 错误：
:class="item.type | typeClass"（过滤器调用） - ❌ 错误：
:class="getTypeClass(item.type)"（方法调用，小程序不支持） - ❌ 错误：
:class="'btn-' + type + (loading ? ' loading' : '')"（字符串拼接，易出空格/非法 class）
替代方案：用 computed 或映射对象代替过滤器
把原本想塞进过滤器的逻辑，提前收口到响应式数据层：
- 静态映射更稳：
const typeClassMap = { 1001: 'oncss', 1002: 'offcss', 1003: 'warncss' }，然后在:class里写:class="typeClassMap[item.type] ? [typeClassMap[item.type]] : []" - 复杂逻辑放
computed：btnClass() { return { 'btn-disabled': this.disabled, [`btn-${this.size}`]: this.size }，模板中直接:class="btnClass" - 需要复用？抽成工具函数，但必须在
data或computed里调用，不能在模板里调 —— 比如data() { return { classMap: typeClassMap } }，再用:class="classMap[item.type]"
真正麻烦的不是写法，而是习惯 —— 把“模板里写逻辑”换成“数据层算清楚再吐出来”，跨平台才不会突然掉链子。尤其注意 class 名含横线时必须加引号，比如 'bg-red-500'，不然会被当成减法运算。
