v-if 中无法使用 filters，因其仅在 {{ }} 和 v-bind 中生效；v-if 接收纯 JavaScript 布尔表达式，嵌套 {{ }} 会编译报错；小程序平台根本不支持 filters，应改用计算属性、方法或数据预处理。
uni-app 里 v-if 和 filters（过滤器）一起用时，根本不会执行过滤器——不是报错，而是静默失效。因为过滤器只在插值表达式 {{ }} 和 v-bind 中生效，v-if 的判断逻辑走的是纯 JavaScript 表达式解析，不经过 Vue 的过滤器管道。
为什么 v-if 里写 {{ item.name | formatName }} 会报错？
这是最常见的误解。你写的其实不是“v-if 里用了过滤器”，而是试图把一个模板语法（{{ }}）塞进指令绑定值里：
<view v-if="{{ item.name | formatName }}">...</view>
这会导致编译失败，报错类似 Invalid expression 或直接白屏。Vue 模板编译器不允许在指令中嵌套插值。
-
v-if只接受一个布尔表达式，例如item.status === 'active' -
{{ item.name | formatName }}是渲染层语法，不能当判断条件用 - 哪怕你绕过语法错误强行拼字符串，运行时也拿不到过滤器函数（小程序平台无全局 filter 注册上下文）
真正在条件渲染中“需要过滤逻辑”的典型场景
比如：后端返回一个 type: 1 字段，你想在 v-if 中判断它是否属于“已支付”状态，而这个映射关系（1 → 已支付）本该由过滤器处理。
- ❌ 错误写法：
v-if="item.type | typeText === '已支付'"（语法非法） - ✅ 正确路径：把过滤逻辑提前到数据层或计算属性中
- 常见场景还包括：根据枚举值显隐按钮、按状态码决定是否显示 error 提示、根据权限字段控制组件渲染等
三种可落地的替代方案（按推荐顺序）
别再试图让过滤器参与条件判断——把它从模板层彻底移出去。
-
方案一（首选）：用计算属性预处理
把“过滤”变成“计算”，在computed里封装映射逻辑：computed: { isPaid() { return this.item.type === 1 } }
然后v-if="isPaid"—— 清晰、可测试、跨平台稳定 -
方案二：方法调用 + 内联判断
写一个简单方法：isType(text) { return text === 'paid' }
然后v-if="isType(item.status)"—— 避免了 filter 的平台兼容性问题（尤其小程序不支持自定义 filter） -
方案三：在 data 或 onLoad 里做一次转换
请求回来后立刻处理：this.list = res.data.map(i => ({ ...i, isPaid: i.type === 1 }))
后续所有v-if直接读item.isPaid—— 减少运行时计算，适合列表渲染
最易被忽略的一点：uni-app 小程序平台（mp-weixin）根本不支持全局或局部注册的 filters，即使你在 H5 能跑通，一编译到小程序就会静默丢弃 filter 定义。所以所谓“冲突”，本质是误用了不存在的能力。
