v-bind中使用过滤器的正确写法是:属性名="表达式 | 过滤器"，必须去掉引号以确保作为Vue表达式解析；加引号会被当字符串字面量，无冒号则成静态属性，均无法触发过滤器。
在 v-bind 中使用过滤器的正确写法
必须写成表达式形式，不能加引号，否则会当成字符串字面量而非 Vue 表达式解析。
常见错误是：:placeholder="msg | toUpper" 看似对，但漏掉了冒号前的引号——不，恰恰相反：加了引号就错了。正确写法就是去掉引号，让它作为绑定表达式运行：
:placeholder="msg | toUpper"
如果写成 :placeholder="'msg | toUpper'（带引号），Vue 会直接把这串字符当文本渲染，不会执行过滤器；如果写成 placeholder="msg | toUpper"（没冒号），那就只是静态属性，更不会响应式更新。
v-bind 支持哪些属性能用过滤器
所有以 : 开头的动态绑定都支持，包括但不限于：
-
:class和:style（注意返回值需符合预期结构，如class过滤器应返回字符串或对象） -
:src、:href、:value等属性绑定 -
:disabled、:readonly等布尔属性（过滤器必须返回true/false，不能返回字符串"true"）
不支持的场景：
- 原生事件绑定如
@click不走过滤器机制 -
v-if、v-show等指令只接受纯 JS 表达式，{{ }}和管道符无效 - 小程序平台下所有
v-bind中的过滤器均不执行（仅 H5 有效）
为什么 v-bind 绑定后过滤器没生效
最常踩的坑不是语法错，而是环境和类型问题：
- 值为
null、undefined或空字符串时，过滤器函数内部未做判空，直接报Cannot read property 'xxx' of undefined - 后端传来的状态码是数字，但过滤器里用字符串 key 匹配（如
map['0']），而实际值是0，导致查不到——应统一转成字符串再查 - 在
v-for中绑定未初始化的嵌套字段，如:title="item.info?.name | truncate"，Vue 2 不支持可选链，会直接报错，得改成:title="item.info && item.info.name | truncate" - 全局过滤器在小程序真机上根本不会调用，控制台也无提示，只会渲染原始值或空字符串
跨端兼容时怎么安全用过滤器
别依赖 v-bind + 过滤器做跨端逻辑，尤其涉及格式化、加密、平台判断等场景：
- 金额、日期等强格式化需求，优先用
Intl.NumberFormat或dayjs封装成工具函数，在computed或methods中显式调用 - 需要调原生插件的场景（如人脸识别、本地加密），过滤器里调
uni.requireNativePlugin必然失败，因为过滤器无加载时机控制 - 真正在模板中要“看起来像过滤器”，可用组件封装 + 条件编译：
#ifdef H5用过滤器，#ifdef APP-PLUS用封装好的方法调原生
真正容易被忽略的是：过滤器在 v-bind 中每次渲染都重新执行，没有缓存。如果过滤逻辑含正则、JSON.parse 或循环遍历，性能损耗会随列表长度线性增长——这种时候，提前在 data 初始化或 computed 中处理好，比堆在模板里可靠得多。
