vue 2 过滤器仅支持 {{ value | filtername }} 写法,须全局注册、h5运行、值非null/undefined;不支持括号调用、表达式、跨端及指令中使用。

直接写 {{ value | filterName }},但必须满足四个前提:Vue 2 版本、全局注册、H5 端运行、值非 null/undefined —— 少一个,就静默失效或报错。
模板里过滤器的唯一合法写法是 {{ value | filterName }}
不是 {{ value | filterName() }},不是 {{ value | filterName(arg) }},更不能写成 {{ (value | filterName) || 'default' }}。Vue 2 的管道语法只接受纯函数名,不支持括号调用、表达式、嵌套或逻辑运算。常见错误包括:
- 在
v-bind中漏掉引号::placeholder="msg | toUpper"是对的,:placeholder="msg | toUpper"(带引号)反而是错的 —— 因为这是表达式,不是字符串 - 把过滤器当方法用:
{{ status | statusText('zh-CN') }}编译直接报Invalid expression - 在
v-if里塞过滤器:<view v-if="{{ item.status | statusText }}">...</view>语法非法,模板指令不解析插值
Vue.filter 必须在 main.js 里注册且早于 new Vue()
过滤器不会自动加载,哪怕你建了 @/filters/index.js 并导出一堆函数,没调 Vue.filter 就等于没写。正确顺序是:
- 在
main.js开头import过滤器定义文件 - 逐个调用
Vue.filter('formatDate', (value, format) => {...}) - 确保这行代码在
new Vue({ ... })之前 - 别放在
App.vue或页面onLoad里 —— 那时组件已开始渲染,注册无效
函数签名必须是 (value, ...args),第一个参数不可省;value 为 null、undefined 或非法字符串时,务必手动判空,否则 new Date(value) 返回 Invalid Date,后续 getFullYear() 报 TypeError。
过滤器只在 H5 有效,小程序和 App 端会原样输出 |
你在微信开发者工具里看到 {{ timestamp | formatDate }} 渲染成 NaN-NaN-NaN 或空白,不是代码错,是 uni-app 小程序平台根本不识别 | 语法。编译阶段就跳过,也不报错。这意味着:
- 跨端项目别依赖过滤器做格式化,尤其是时间、金额、千分位
- 真要复用逻辑,改用工具函数 +
computed或methods显式调用 - 例如日期格式化,封装为
export const formatDate = (date) => { ... },在页面中computed: { displayTime() { return formatDate(this.item.time) } } - 金额类优先用
Intl.NumberFormat,它在微信基础库 2.19.0+、支付宝 10.2.80+ 等主流环境已稳定支持
状态码转文字这类简单映射,过滤器可用但要注意 key 类型
比如后端返回 "0" 字符串而非数字 0,过滤器里写 map[0] 就匹配不到。正确写法是:
Vue.filter('statusText', function(value) {
const map = { '0': '正常', '1': '待审核', '2': '已拒绝', '3': '已通过' }
return map[value] || '未知状态'
})
别加第二个参数,也别在过滤器里调 this.$t(上下文不可靠)。如果状态语义需国际化,映射表应从 i18n 字典读取,但过滤器本身只负责查表,查表逻辑提前做好。
真正容易被忽略的是:模板里 {{ item.status | statusText }} 要求 item.status 是已声明的响应式属性。若 item 初始为 {} 或 undefined,就会触发 Cannot read property 'status' of undefined —— Vue 2 不支持可选链,得靠初始化兜底或改用 {{ (item && item.status) | statusText }}。










