toUpperCase()过滤器在uni-app中大概率不生效，因小程序端跳过管道符解析、Vue3已移除filters API；应改用工具函数主动调用并做类型校验。
别用过滤器做这个事——小程序端根本不会执行，H5 也可能因 Vue 版本失效。
为什么 toUpperCase() 过滤器在 uni-app 里大概率不生效
uni-app 的过滤器（Vue.filter）只在 Vue 2 模式下对 H5 有效；微信/支付宝/字节等小程序编译器会直接跳过 | 管道符解析，连函数体都不会进入；而 uni-app 3.x（基于 Vue 3）已彻底移除 filters API，Vue.filter 调用会报错。
常见错误现象：
- {{ text | toUpper }} 在 H5 看着正常，真机调试时小程序页面文字原样不动
- 控制台无报错，但断点打在过滤器函数里永远不触发——说明它根本没被调用
- 升级到
@dcloudio/uni-app@3.0.0+后，Vue.filter报TypeError: Vue.filter is not a function
真正能跨端生效的写法：工具函数 + 主动调用
把转换逻辑从模板层拿到 JS 层，由你控制何时执行、传什么值、怎么兜底。
推荐在 utils/string.js 中封装：
export const toUpper = (str) => {
if (typeof str !== 'string') return ''
return str.toUpperCase()
}
在组件中使用：
- 展示场景（非响应式）：
{{ toUpper(item.title) }}（toUpper需从setup或methods暴露） - 表单绑定（需同步更新）：
:value="toUpper(formData.name)"+@input="e => formData.name = e.detail.value" - 计算属性（自动响应）：
const upperName = computed(() => toUpper(formData.name))
注意：不要依赖 v-model 自动转大写——它只同步值，不修改原始数据。
输入框实时转大写的正确监听方式
如果目标是「用户一输小写，立刻显示大写」，必须拆解 v-model，手动控制值流。
模板写法：
<input type="text" :value="formData.code" @input="handleCodeInput" />
JS 处理逻辑：
const handleCodeInput = (e) => {
let val = e.detail.value
// 先过滤非法字符（如空格、符号），再转大写
val = val.replace(/[^a-zA-Z0-9]/g, '').toUpperCase()
formData.code = val
}
关键点：
- 不能只靠
@input触发后赋值，还要确保:value绑定的是处理后的值，否则光标会跳脱 - 正则
/[^a-zA-Z0-9]/g必须放在toUpperCase()前，否则像a1!会变成A1!（感叹号残留） - 移动端软键盘切换时可能触发多次
@input，该逻辑天然幂等，无需额外防抖
容易被忽略的边界情况
看似一行 str.toUpperCase() 就完事，但实际线上最容易爆的不是逻辑，是类型和环境。
-
null或undefined直接调用会报Cannot read property 'toUpperCase' of null—— 务必加typeof str === 'string'判断 - 中文、emoji、全角字符调用
toUpperCase()无效果，但也不会报错；若业务要求「混合内容只转英文字母」，得用正则：str.replace(/[a-z]/g, c => c.toUpperCase()) - 某些字体在 Android 上渲染时，
text-transform: uppercase会被系统强制接管（尤其Button），此时 JS 层转大写才是唯一可控手段
跨端稳定的本质，不是“怎么转”，而是“谁来转、什么时候转、转完给谁”。模板里的 | 不是执行入口，只是个幻觉。
