uni-app小程序端不支持过滤器，因编译器跳过管道符且小程序runtime无filters支持；vue 3已移除vue.filter api；应封装capitalize工具函数并在js层主动调用。
uni-app 里不能用过滤器实现首字母大写——不是语法写不对，是过滤器（filters）在小程序端根本不会执行，Vue 3 模式下更已被官方移除。
为什么 {{ text | capitalize }} 在微信/支付宝小程序里没反应
你写的 Vue.filter('capitalize', ...) 在 main.js 里注册了，H5 能显示，但真机调试时文字还是小写。这不是逻辑错，是 uni-app 编译器对小程序平台直接跳过所有 | 管道符解析。哪怕你用的是 Vue 2 模式（vueVersion: "2"），小程序 runtime 也不加载、不调用那段 filter 函数。
- 微信/支付宝/字节等小程序环境没有
filters运行时支持 - uni-app 3.x（基于 Vue 3）已彻底删除
Vue.filterAPI，调用即报错 - 即使 H5 正常，跨端一致性也完全无法保障——你没法只测 H5 就上线
真正能跑通的写法：封装成工具函数 + 主动调用
把首字母大写逻辑从模板层移到 JS 层，自己控制何时执行、如何兜底。推荐放在 utils/string.js 里统一管理：
export const capitalize = (str) => {
if (typeof str !== 'string' || str.length === 0) return ''
return str.charAt(0).toUpperCase() + str.slice(1).toLowerCase()
}
- 必须判断
typeof str === 'string'，否则null或undefined传入会触发Cannot read property 'charAt' of undefined -
str.slice(1).toLowerCase()是可选的——如果你只要首字母大写、其余保持原样，就去掉.toLowerCase() - 中文、emoji、数字开头的字符串调用后不变，符合预期；不需要额外正则干预
在组件里怎么用才不翻车
别再依赖 {{ name | capitalize }}。根据使用场景选下面一种：
- 展示用（如列表项标题）：
{{ capitalize(item.name) }}，直接在模板表达式中调用函数 - 表单输入实时转换：
@input="e => formData.title = capitalize(e.detail.value)"，配合:value使用，避开v-model的响应式陷阱 - 需要响应式同步（比如改名后预览也变）：用
computed包一层capitalizedTitle: () => capitalize(formData.title)
注意：如果原始值来自接口且可能为 null，建议提前在请求后处理，而不是每次渲染都判空——减少重复计算，也避免模板里堆砌 capitalize(item?.name || '') 这类冗余逻辑。
想兼容中文首字母？别碰过滤器，改用拼音库预处理
如果需求是“张三 → 张”、“Apple → A”，那 capitalize() 本身无能为力。此时首字母大写本质是「取拼音首字母」，必须在数据拉取后、存入 data 前完成：
- 用
pinyin-pro（比老版js-pinyin更轻、ESM 友好）：import { getPinyin } from 'pinyin-pro' - 处理逻辑写在
onLoad或asyncData里：item.initial = getPinyin(item.name, { first: true }).toUpperCase() - 不要在模板里调用拼音函数——WXS 不支持第三方库，且跨端性能差
真正的难点从来不在“怎么让第一个字母变大写”，而在于“谁来保证这个操作在所有平台同一时间、同一上下文、同一数据状态下被执行”。过滤器交不出这张答卷，你得亲手把它接住。
