Vue实现百分比保留一位小数，跳过整数百分比的显示问题

你的代码里使用toFixed(1)会强制保留一位小数，导致整数百分比被格式化为x.0%。可以通过以下两种方式修复：

方法一：判断百分比是否为整数 #

直接判断计算后的百分比数值是否为整数，整数则直接拼接%，非整数保留一位小数：

items() {
  return this.data
    .map(item => {
      const perc = item.count / number * 100
      const percentage = Number.isInteger(perc) 
        ? `${perc}%` 
        : parseFloat(perc).toFixed(1) + '%'

      return { ...item, percentage }
    })
    .sort((a, b) => b.count - a.count)
}

这种方式更严谨，能避免浮点计算精度导致的误判。

方法二：正则替换多余的.0 #

先按原逻辑格式化，再用正则去掉末尾的.0部分：

items() {
  return this.data
    .map(item => {
      const perc = item.count / number * 100
      let percentage = parseFloat(perc).toFixed(1) + '%'
      // 替换掉末尾的.0%为%
      percentage = percentage.replace('.0%', '%')

      return { ...item, percentage }
    })
    .sort((a, b) => b.count - a.count)
}

这种方式实现简单，适合计算结果不会出现因精度问题导致的假整数场景。

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