过滤器不能控制文字颜色，因其仅做数据转换、返回基础类型且不参与样式解析；应使用:class或:style绑定状态映射的颜色值，确保跨端一致与安全。
不能用过滤器控制文字颜色——过滤器只负责数据转换，不参与样式控制；想让不同状态显示不同颜色，得用 class 或 style 绑定，配合状态映射逻辑。
为什么过滤器不能直接设颜色
Vue 过滤器（| 语法）的返回值只能是字符串、数字等基础类型，它无法返回 CSS 类名或内联样式对象。即使你写成 {{ status | statusColor }} 并在过滤器里返回 'color: red'，模板也不会自动把它当样式解析——这会直接渲染成文本，甚至引发 XSS 风险。
- 过滤器本质是纯函数，设计目标是“输入值 → 输出值”，不是“输入值 → 输出样式”
- uni-app 小程序端根本不会执行过滤器（编译器跳过），H5 端能跑也不代表能安全用于样式
- 颜色属于视图层表现，应由 class 名或 style 对象驱动，和响应式系统联动才可控
正确做法：用 computed 或内联 style 绑定颜色
把状态码到颜色的映射逻辑放在 JS 层，然后通过 :class 或 :style 应用到元素上。这样跨端一致、可调试、可复用。
- 推荐用
:class：定义语义化类名，比如status-0、status-1，再在样式里统一写颜色 - 也可用
:style直接绑定对象：:style="{ color: statusColorMap[status] || '#999' }" - 映射对象建议写在
data()或computed里，避免硬编码在模板中 - key 必须用字符串（
'0'而非0），因为后端传来的 status 多为字符串类型
示例：
data() {
return {
status: '1',
statusColorMap: {
'0': '#4CAF50', // 正常 → 绿色
'1': '#FF9800', // 待审核 → 橙色
'2': '#F44336', // 已拒绝 → 红色
'3': '#2196F3' // 已通过 → 蓝色
}
}
}
模板中：<text :style="{ color: statusColorMap[status] || '#999' }">{{ status | statusText }}</text>
如果坚持要用过滤器，只能返回 class 名（不推荐）
极少数场景下，有人把过滤器改成返回 class 字符串，比如 {{ status | statusClass }} 返回 "status-pending"，再配合 :class 使用。但这会让模板职责混乱，且无法享受样式自动作用域（scoped style 可能失效）。
- 必须确保返回的 class 名已在全局或组件样式中定义好，否则颜色不会生效
- 小程序端依然不执行该过滤器，
statusClass返回值为空，class 绑定失败 - 无法做动态主题适配（比如深色模式下同个状态要换色），class 名无法携带上下文
- 不如直接用
computed或method显式调用，逻辑更清晰、调试更方便
容易被忽略的细节：空值与类型安全
后端字段可能为 null、undefined 或空字符串，直接取 statusColorMap[status] 会返回 undefined，导致颜色丢失。所有映射访问都必须兜底。
- 不要写
statusColorMap[status]，而要写statusColorMap[status] ?? '#999'或statusColorMap[status] || '#999' - 如果 status 是数字但 map key 是字符串，先转类型：
statusColorMap[String(status)] - 避免在
v-for中对未初始化的item.status直接访问，应加空值判断：item?.status - 颜色值建议用十六进制（
#4CAF50）而非英文名（green），兼容性更好，小程序部分基础库不支持英文色名
真正关键的不是“怎么写过滤器”，而是意识到：颜色是样式问题，不是数据转换问题。把映射逻辑从模板移出来，用响应式变量 + 样式绑定，才是 uni-app 跨端稳定的解法。
