uni-app不支持全局过滤器,动态改文字颜色应使用computed、style绑定或方法封装,而非filters;uni.scss变量为编译期静态值,动态变色需依赖CSS自定义属性或响应式:class/:style。

uni-app里根本没有全局过滤器机制
uni-app(基于 Vue 2.9+ / Vue 3 的编译目标)**不支持 Vue 2 的 filters 选项**,也不提供类似 Vue 3 的全局过滤器注册 API。所谓“通过过滤器动态改文字颜色”,本质是混淆了概念——filters 在 Vue 中仅用于模板中格式化文本输出(如 {{ price | currency }}),它不能操作样式、不响应数据变化、无法绑定 CSS 属性。
想动态改文字颜色,该用 computed 或 style 绑定
真正可行的方式是把颜色逻辑写进响应式计算或内联样式里,而不是幻想靠过滤器驱动样式:
- 用
computed返回颜色值:computed: { textColor() { return this.isDark ? '#fff' : '#333'; } },然后在模板中:style="{ color: textColor }" - 直接在模板中写三元表达式:
:style="{ color: theme === 'dark' ? '#e0e0e0' : '#212121' }" - 若需复用逻辑,封装成方法:
methods: { getTextColor(theme) { return theme === 'dark' ? '--text-dark' : '--text-light'; } },再配合class="text-{{ getTextColor(currentTheme) }}"(注意:class 不支持表达式返回带连字符的字符串,推荐用:class数组写法)
别在 uni.scss 里指望过滤器生效
uni.scss 是编译期预处理文件,所有 $xxx 变量在构建时就被替换成固定值。你写 color: $uni-color-primary;,最终生成的是 color: #007aff; —— 它和运行时主题切换完全无关。常见错误是以为改了 $uni-color-primary 再调用某个“过滤器”,就能刷新页面文字色,结果发现毫无反应。
真正能动态变色的只有两类东西:
- CSS 自定义属性(
--primary-color),配合document.documentElement.style.setProperty()(H5)或 class 切换(小程序/App) - Vue 响应式数据驱动的
:style或:class
小程序端特别注意:不要用 scoped 样式覆盖 CSS 变量
在微信小程序中,如果用了 <style scoped></style>,里面的 :root { --color: red; } 会被编译器忽略或隔离——变量根本不会注入到全局作用域。必须把主题变量声明放在未加 scoped 的 <style></style> 块中,或者统一提到 App.vue 的非 scoped 样式里。
另外,小程序基础库低于 2.7.0 时,var(--xxx) 不会随 JS 修改实时重绘,文字颜色就卡死在初始值,这点真机调试前务必确认。


















