uni-app怎么用过滤器实现金额保留两位小数-uni-app-PHP中文网

uni-app过滤器不支持动态参数，tofixed(2)不能在模板中直接调用；应使用math.round(num*100)/100+''并加空值判断来安全格式化金额。

uni-app怎么用过滤器实现金额保留两位小数

uni-app 中过滤器不支持动态参数，`toFixed(2)` 不能直接在模板里调用

uni-app 的 Vue 2 模板语法中，过滤器（filters）是纯函数，只接收表达式值作为第一个参数，无法传入 2 这样的动态位数。所以写成 {{ price | toFixed(2) }} 会报错 —— Vue 解析器根本不支持带括号的过滤器调用。

常见错误现象：TypeError: filter is not a function 或模板直接渲染 undefined。

必须把位数写死在过滤器定义里，比如固定两位：在 main.js 或页面 export default 中声明 filters: { money: val => Number(val).toFixed(2) }
如果原始值是字符串（如 "199.9"）或空值（null、undefined），Number() 会转成 NaN，导致 NaN.toFixed(2) 报错，需加兜底
注意：H5 端和小程序端对 Number().toFixed() 行为一致，但某些老安卓 WebView 有精度 bug（如 1.005.toFixed(2) 得 "1.00" 而非 "1.01"），生产环境建议用四舍五入 + Math.round 方案

`filters` 里正确实现金额保留两位小数的写法

过滤器本质是函数，输入 → 处理 → 输出。关键不是“怎么写”，而是“怎么防崩”。下面是在页面级定义的可靠写法：

export default {
  filters: {
    money(val) {
      if (val == null || val === '') return '0.00'
      const num = Number(val)
      return isNaN(num) ? '0.00' : Math.round(num * 100) / 100 + ''
    }
  }
}

说明：

uni-app

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

下载

用 Math.round(num * 100) / 100 替代 toFixed(2)，规避浮点误差（如 0.1 + 0.2 得 0.30000000000000004）
结尾加 + '' 确保返回字符串，避免模板中因类型问题触发意外转换
不推荐在 main.js 全局注册同名过滤器，因为不同业务对空值/负数/单位的处理逻辑可能冲突

更推荐的方案：用计算属性或方法替代过滤器

uni-app 官方文档已明确提示：Vue 3 废弃过滤器，uni-app 后续也会逐步弱化支持。现在就该习惯用更可控的方式。

场景举例：列表页展示商品价格，需要统一格式化且可能带千分位

在 methods 里写一个通用格式化函数：formatMoney(val, digits = 2)，模板中调用 {{ formatMoney(item.price) }}
如果只是单个字段频繁使用，用 computed 更高效：formattedPrice() { return this.formatMoney(this.price) }
注意：方法调用会在每次响应式依赖更新时重新执行，但金额类数据变动频率低，性能无压力