vue3实现金额千位分隔符

可以使用 Vue3 的过滤器来实现金额千位分隔符。具体实现代码如下：

//定义金额千位分隔符过滤器
const thousandSeparatorFilter = (value) => {
  if (!value) return '0.00'
  //将金额转化为字符串格式
  let amount = value.toString()
  //判断金额是否为负数
  const negative = amount.charAt(0) === '-'
  if (negative) {
    amount = amount.slice(1)
  }
  //按小数点分割
  const [integer, decimal = '00'] = amount.split('.')
  //整数部分添加千位分隔符
  const resultInteger = integer.replace(/\B(?=(\d{3})+(?!\d))/g, ',')
  //返回最终结果
  return `${negative ? '-' : ''}${resultInteger}.${decimal}`
}

//在Vue3中使用过滤器
const app = Vue.createApp({})
app.config.globalProperties.$filters = {
  thousandSeparator: thousandSeparatorFilter
}
//在模板中使用过滤器
<template>
  <div>{{amount | thousandSeparator}}</div>
</template>