genderFilter 必须严格命名且全局/局部注册,处理 null/undefined/字符串数字输入,仅支持无参调用,Vue 3 环境需改用函数替代。

过滤器函数名必须是 genderFilter,不能用驼峰或下划线变体
Vue 2(uni-app 默认)的过滤器注册机制只认严格匹配的字符串名。写成 genderFilter、gender_filter 或 genderfilter 都会失效,模板里 {{ item.sex | genderFilter }} 直接报「filter not defined」错误。全局注册时必须用原名:Vue.filter('genderFilter', ...);局部定义也要保持一致。
genderFilter 的实现必须处理 undefined / null / 非数字输入
真实数据中 sex 字段常为空、字符串 "0"/"1"、数字 0/1,甚至后端返回 null。直接 value === 0 判断会漏掉字符串 "0",而 !value 又会把 0 当 false 处理。推荐写法:
Vue.filter('genderFilter', function(value) {
if (value == null || value === '') return '未知'
if (value == 0 || value === '0') return '女'
if (value == 1 || value === '1') return '男'
return '未知'
})
注意用 == 而非 ===,兼容字符串和数字输入;== null 同时覆盖 null 和 undefined。
模板中调用时不能传额外参数,否则过滤器不生效
uni-app 的 Vue 2 过滤器不支持传参语法 {{ value | genderFilter('custom') }}。所有逻辑必须封装在函数体内。如果需要不同文案(比如「男/女」vs「M/F」),得注册两个过滤器:genderFilter 和 genderAbbrFilter,而不是靠参数切换。
- ✅ 正确:
{{ item.sex | genderFilter }} - ❌ 错误:
{{ item.sex | genderFilter('short') }}(会被忽略,返回原始值) - ❌ 错误:
{{ item.sex | genderFilter() }}(语法错误)
H5 和小程序端表现一致,但 App 端需确认 Vue 版本
uni-app 编译到 App 平台时,若使用的是旧版 SDK(如 3.1.x 之前),可能仍基于 Vue 2.6.x,过滤器正常;但部分定制化打包环境若升级到 Vue 3,则过滤器完全不可用——因为 Vue 3 已移除过滤器 API。此时必须改用 computed 或方法调用:{{ getGender(item.sex) }}。检查项目根目录 package.json 中 @dcloudio/uni-app 版本,≥ 3.5.0 且目标平台为 App 时,优先考虑函数替代方案。


















