Vue 2 模板编译器仅允许过滤器接收字面量或简单标识符参数，不支持表达式、运算符或函数调用；正确方式是将动态值预存为响应式变量（如 decimalPlaces）或打包为对象传入，且过滤器无法访问组件实例数据，所有参数须显式传递。
过滤器不能直接接收动态表达式参数，比如 {{ value | format('hello' + suffix) }} 这种写法在 Vue 2（uni-app 当前底层）里会编译报错：Invalid expression。
为什么 {{ value | filter(arg) }} 会报错
Vue 2 模板编译器只允许过滤器后跟字面量（字符串、数字、布尔值）或简单标识符（如 data 中已声明的变量），不支持运算符、函数调用、模板表达式。所以以下全是非法的：
-
{{ item.price | toFixed(item.decimal) }}（item.decimal是响应式字段，但语法不被允许） -
{{ name | upperCase() }}（带括号即被识别为调用，不允许） -
{{ value | concat(prefix + suffix) }}（含+表达式）
正确传动态参数的两种方式
必须把「动态性」提前收口到一个可被模板直接引用的变量上：
- 用
data或setup中定义的响应式变量（如ref或computed）作为过滤器参数，例如：{{ price | toFixed(decimalPlaces) }}，其中decimalPlaces是一个ref(2) - 把多个参数打包成一个对象传入，过滤器内部解构，例如：
{{ user | formatUser({ mode: 'short', showAvatar: true }) }}，前提是这个formatUser过滤器已注册且接受一个对象
局部过滤器里怎么访问页面 data 数据
过滤器函数本身是纯函数，接收的只有管道前的值和显式传入的参数，它 无法访问 this、组件实例或 data 响应式上下文。所以别试图在过滤器里读 this.userId 或 store.state.lang。
- 所有依赖必须显式通过参数传入，哪怕只是传一个
lang字符串 - 如果参数来自
computed，确保它已提前计算好，比如：const shareTitle = computed(() => `限时${sale.value}% off`)，再在模板中写{{ product | withTitle(shareTitle) }} - 避免在过滤器里做副作用（如发请求、改 localstorage），链式调用会让调试变得不可控
容易被忽略的坑：null/undefined 传递和缓存缺失
如果某个过滤器返回 null 或 undefined，后续过滤器会直接收到该值——比如 {{ user.name | upperCase | truncate(10) }}，当 user.name 为空时，upperCase(null) 返回 null，truncate 就可能报 Cannot read property 'slice' of null。
- 每个过滤器都应自行处理边界值（
if (value == null) return ''） - 高频使用的过滤器（尤其在
v-for里）没有缓存机制，每次渲染都执行。涉及正则、JSON.parse 或复杂条件判断的，建议移到computed或onLoad初始化阶段预处理 - 小程序端调试时，可用
console.log打点确认过滤器是否真的注册成功；H5 端可查Vue.options.filters
