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

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

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

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）看似简单，但实际踩坑多：

uni-app

uni-app 是基于 Vue 的跨端开发框架，适合开发 H5、App、小程序、鸿蒙和多端业务应用。

下载

不处理负数：-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" 或静默失败，尤其后端返回的是字符串型金额。