uni-app中过滤器仅vue 2版本(2.x)支持,需在main.js中用vue.filter注册且置于new vue()前,模板中写法为{{ value | filtername }},不支持嵌套、括号或命名参数;vue 3版本(3.x)已移除过滤器。

模板里写 {{ date | formatDate }} 就能用,但得先注册
uni-app 的过滤器语法和 Vue 2 完全一致,{{ value | filterName }} 是唯一合法写法,不能加括号、不能传命名参数、不能嵌套多个管道符(比如 {{ date | formatDate | uppercase }} 不支持)。常见错误是直接在 v-bind 里漏掉引号::placeholder="msg | toUpper" 会报错,必须写成 :placeholder="msg | toUpper" —— 注意这里不是字符串,而是表达式,所以引号反而是错的。
Vue.filter 必须在 main.js 里调用,且要在 new Vue() 之前
全局过滤器只认 Vue.filter("name", fn) 这种写法,写在组件 filters 选项里是局部过滤器,仅本组件可用。uni-app 启动流程中,main.js 是最早执行的 JS 入口,必须确保:
-
Vue.filter调用在new Vue({ ... })之前 - 不能放在
App.vue或页面组件里 —— 那些时机太晚,其他组件已渲染完毕,过滤器不生效 - 如果用了
vue-cli或uni-app vite模式,main.js路径仍是项目根目录下那个,不是src/main.js
日期过滤器容易踩的坑:new Date(date) 对 null/undefined/非法字符串静默失败
像 "Tue Mar 08 2022 14:44:42 GMT+0800 (中国标准时间)" 这种字符串,new Date() 能解析,但遇到 null、空字符串或 "invalid" 会返回 Invalid Date,后续 getFullYear() 报 TypeError。实际写法得加防护:
Vue.filter("formatDate", (date) => {
if (!date) return ""
const d = new Date(date)
if (isNaN(d.getTime())) return ""
return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, "0")}-${String(d.getDate()).padStart(2, "0")}`
})
别省略 isNaN(d.getTime()) 判断,否则上线后某个页面突然白屏,很难定位。
uni-app 2.x 支持过滤器,3.x(基于 Vue 3)已移除,别混用
目前绝大多数 uni-app 项目仍是基于 Vue 2 的 2.x 版本(对应 HBuilderX 4.x / cli 2.x),Vue.filter 有效。但如果你升级到了 uni-app 3(实验性 Vue 3 支持),过滤器 API 已被 Vue 官方废弃,Vue.filter 会报错,模板里的 | 也不再解析。此时必须改用计算属性、方法调用或自定义指令替代 —— 没有兼容层,硬切换。
检查方式很简单:打开 package.json,看 "@dcloudio/uni-app" 版本号是否大于等于 3.0.0-alpha;或者运行 uni.getSystemInfoSync().platform 后查文档确认运行时版本。别等打包失败才想起这茬。










