uni-app 的 v-for 中不能使用过滤器，因小程序平台不支持管道语法；应改用 methods、computed 或工具函数封装格式化逻辑，确保多端兼容与可维护性。
uni-app 的 v-for 里不能直接用过滤器（| filterName）
Vue 2 在普通模板中支持管道语法如 {{ item.name | upperCase }}，但 uni-app 基于 Vue 2 编译到多端时，小程序平台（微信、支付宝等）不支持过滤器语法，编译会报错或静默失效。H5 端虽能跑，但为了一致性和可维护性，应避免使用。
用计算属性或方法替代过滤器最稳妥
把过滤逻辑提前处理好，再传给 v-for 渲染。这样既兼容所有平台，也方便调试和复用。
- 对简单转换（如格式化日期、截取字符串），写成内联表达式：
{{ item.time ? new Date(item.time).toLocaleDateString() : '' }} - 对稍复杂逻辑（如状态映射、多条件判断），封装成组件内的
methods方法：methods: { formatStatus(val) { const map = { 0: '待付款', 1: '已发货', 2: '已完成' } return map[val] || '未知' } }然后在模板中调用：{{ formatStatus(item.status) }} - 如果要对整个列表预处理（比如统一格式化后再渲染），用
computed：computed: { formattedList() { return this.rawList.map(item => ({ ...item, displayName: item.name?.trim().toUpperCase() || '-' })) } }再在v-for中遍历：v-for="item in formattedList"
注意 v-for 中访问 this 的边界
模板内不能直接调用箭头函数、不能访问未声明的 this.xxx，且方法调用不要带括号以外的表达式（如 {{ format(item).trim() }} 会报错）。
- ❌ 错误写法：
{{ item.price.toFixed(2) }}（toFixed是 Number 原生方法，但item.price可能为null或undefined，运行时报Cannot read property 'toFixed' of null） - ✅ 正确写法：封装方法并做空值判断
formatPrice(val) { return typeof val === 'number' ? val.toFixed(2) : '0.00' }再用：{{ formatPrice(item.price) }} - 小程序真机调试时，模板中过多嵌套计算可能影响性能，高频列表建议预计算或用
computed缓存
想复用过滤逻辑？别写全局过滤器，改用工具函数 + import
uni-app 不推荐 Vue 2 的 Vue.filter() 全局注册（H5 有效，小程序无效），更可靠的是把格式化函数抽成独立 JS 文件：
// utils/format.js
export function formatDate(timestamp, fmt = 'yyyy-MM-dd') {
if (!timestamp) return ''
const d = new Date(timestamp)
// ... 实现略
return result
}
export function truncate(str, len = 10) {
return str?.length > len ? str.slice(0, len) + '...' : str
}
组件中导入使用：
import { formatDate, truncate } from '@/utils/format.js'
export default {
methods: {
formatDate,
truncate
}
}然后模板里照常调用：{{ formatDate(item.time) }}
这种写法清晰、可测试、跨平台无差异，而且 IDE 能跳转、类型提示也友好。
真正麻烦的不是“怎么加过滤器”，而是忘记小程序不认管道符，以及在模板里写太多逻辑导致难维护、易出错。把转换提到 JS 层，v-for 就只是纯粹的渲染容器。
