如何修改Vue的GBP货币过滤器将零值显示为短横线？

你只需要在现有过滤器中新增零值判断逻辑，在格式化前先检查数值是否为零，是的话直接返回短横线即可。修改后的代码如下：

Vue.filter("gbp", function (value) {
  // 处理空值，null/undefined直接返回原值
  if (value === null || value === undefined) {
    return value;
  }
  // 将输入值统一转为数字类型，兼容字符串形式的零（如"0"、"0.00"）
  const num = +value;
  // 零值直接返回短横线
  if (num === 0) {
    return "-";
  }
  // 非零值正常格式化GBP货币
  const formatter = new Intl.NumberFormat("en-GB", {
    style: "currency",
    currency: "GBP",
    minimumFractionDigits: 2,
  });
  return formatter.format(num);
});

关键改动说明： #

• 新增数值转换步骤：把输入值转为数字，确保字符串形式的零（比如表格中可能出现的"0"）也能被识别为零值
• 提前加入零值判断：只要数值为0，直接返回短横线，跳过后续的货币格式化流程
• 保留原有的空值处理逻辑，避免null/undefined被错误格式化

内容的提问来源于stack exchange，提问作者Gordon Copestake