uni-app怎么在v-for循环里使用过滤器

在前端开发内容学习中，uni-app怎么在v-for循环里使用过滤器是常见主题。很多人在阅读时会遇到概念分散、步骤不清和注意点难以归纳的问题。本文按照基础概念、操作流程和关键细节，对相关内容进行整理。

uni-app中v-for内不可靠使用filters，因小程序端完全忽略、Vue 3已移除该API；应改用setup中封装Intl.NumberFormat格式化函数或计算属性实现跨平台稳定千分位处理。

uni-app 的 v-for 里不能可靠使用过滤器（filters）

直接在 v-for 模板中写 {{ price | toThousands }}，多数情况下不会生效——不是你写错了，而是 uni-app 编译机制决定的：微信、支付宝、字节、鸿蒙等小程序端完全忽略 Vue.filter 注册的过滤器；H5 端仅在 Vue 2 模式（main.js 中调用 Vue.filter）下勉强可用，但 Vue 3（即 setup + @vue/composition-api）已彻底移除该 API。

替代方案：用计算属性或函数封装格式化逻辑

把格式化逻辑从模板层抽出来，在 setup 或 data 中预处理或实时调用，才是跨平台稳定的写法：

• 在 setup 中定义一个格式化函数，比如：

  const formatMoney = (value) => {
  if (value == null) return '0.00'
  const num = Number(value)
  return new Intl.NumberFormat('zh-CN', {
  minimumFractionDigits: 2,
  maximumFractionDigits: 2
  }).format(num)
  }

• 在 v-for 中直接调用：{{ formatMoney(item.price) }}
• 若数据量大、频繁渲染，可提前在 onLoad 或 watch 中批量格式化并存入响应式变量，避免每次渲染都执行格式化

为什么不用正则手写千分位？

手写正则（如 /(d)(?=(d{3})+.)/g）看似简单，但实际踩坑多：

• 不处理负数：-12345 → -12,345（漏掉负号就变成 12,345）
• 浮点精度问题：(0.1 + 0.2).toFixed(2) 得到 "0.30000000000000004"，必须先 Math.round(num * 100) / 100
• 小数点缺失时匹配失败：整数 12345 不含小数点，原正则不触发
• 小程序真机上低基础库版本（如微信 Intl 的 maximumFractionDigits，建议只设 minimumFractionDigits: 2，再手动截断

在 v-for 里频繁调用格式化函数会影响性能吗？

影响极小，但有优化空间：

• 每次调用 new Intl.NumberFormat() 会新建实例，开销虽小，但可复用：在 setup 外层定义一次 formatter 实例，再在函数中复用
• 不要在 computed 或 watch 里反复构造 formatter，它本身是轻量对象
• 如果列表项超过 100 条且滚动频繁，建议用 recycle-list 替代原生 v-for，配合预格式化字段（如 item.formattedPrice）进一步减少运行时计算

真正容易被忽略的是：格式化前没做 Number() 转换——传字符串进去，Intl.NumberFormat 可能返回 "Invalid" 或静默失败，尤其后端返回的是字符串型金额。