直接用 toLowerCase() 即可,但 uni-app 中 filters 在小程序端不生效,因编译器跳过解析;应改用计算属性或工具函数实现跨端一致,注意处理 null/undefined、中文及 emoji 等边界情况。

直接用 toLowerCase() 就行,但别在 Vue 2 的 filters 里写——小程序端根本不会执行。
uni-app 里 filters 不生效是常态,不是你写错了
你在 main.js 里注册了 Vue.filter('toLower', val => val.toLowerCase()),模板里写 {{ text | toLower }},H5 可能显示正常,但微信/支付宝/字节小程序真机一跑,啥都不变。这不是 bug,是设计限制:小程序编译器压根不解析 filters 节点,直接跳过。
- Vue 3(即 uni-app 3.x 的 Composition API 模式)已移除全局
filtersAPI,连 H5 都不支持 - 哪怕你项目还在用 Vue 2 模式,也只对 H5 有效,其他端等于白写
- 如果你看到页面没变化,第一反应不该是“逻辑错了”,而是“这 filter 根本没进小程序的 JS 上下文”
真正能跨端生效的写法:计算属性 or 工具函数
把转换逻辑从模板层挪到逻辑层,由你主动调用,而不是依赖框架管道。这样 iOS、安卓、各大小程序全都能走同一套代码路径。
- 在
setup()里定义函数:const toLower = (str) => typeof str === 'string' ? str.toLowerCase() : '' - 绑定到 input 时直接用:
:value="toLower(formData.name)"(注意:要配合@input手动更新值,不能只靠v-model) - 更稳妥的做法是用计算属性 +
watch:监听原始字段变化,自动同步转小写后的副本,避免视图和数据错位 - 如果只是展示用(比如列表项标题),直接在
render或return中调用函数,不走响应式链路也完全 OK
注意中文、emoji 和空值的边界情况
toLowerCase() 对纯 ASCII 字母安全,但遇到中文、日文、emoji 或 null/undefined 会出问题——不是报错,而是返回原值或 undefined,导致渲染异常。
- 务必先做类型判断:
typeof val === 'string',否则undefined.toLowerCase()直接报错 - 中文字符调
toLowerCase()无效果,但也不会报错;如果你业务要求“中英文混合时只转英文字母”,那就得用正则:val.replace(/[A-Z]/g, c => c.toLowerCase()) - emoji 如
'??'是多个 Unicode 码点组合,toLowerCase()不处理,也不应强行干预——这类字符本来就没大小写概念 - 输入框初始值为空字符串
'',没问题;但如果是null或undefined,必须兜底:String(val || '').toLowerCase()
跨端过滤的核心不是“怎么转大小写”,而是“怎么确保这段逻辑一定被执行”。别被 filters 的语法糖迷惑,它在小程序里就是个幻觉。


















