金额格式化,三位数逗号分隔,小数点后保留两位(vue金额过滤器)

用法一:(功能函数调用)

function formater(data) {
	  if (!data) return '0.00'
	  // 将数据分割,保留两位小数
	  data= data.toFixed(2)
	  // 获取整数部分
	  const intPart = Math.trunc(data)
	  // 整数部分处理,增加,
	  const intPartFormat = intPart.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,')
	  // 预定义小数部分
	  let floatPart = '.00'
	  // 将数据分割为小数部分和整数部分
	  const newArr = data.toString().split('.')
	  if (newArr.length === 2) { // 有小数部分
	    floatPart = newArr[1].toString() // 取得小数部分
	    return intPartFormat + '.' + floatPart
	  }
	  return intPartFormat + floatPart
}
	

用法二:注册为全局过滤器使用(vue)

Vue.filter("formatMoney", (value) => {
  if (!data) return '0.00'
	  // 将数据分割,保留两位小数
	  data= data.toFixed(2)
	  // 获取整数部分
	  const intPart = Math.trunc(data)
	  // 整数部分处理,增加,
	  const intPartFormat = intPart.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,')
	  // 预定义小数部分
	  let floatPart = '.00'
	  // 将数据分割为小数部分和整数部分
	  const newArr = data.toString().split('.')
	  if (newArr.length === 2) { // 有小数部分
	    floatPart = newArr[1].toString() // 取得小数部分
	    return intPartFormat + '.' + floatPart
	  }
	  return intPartFormat + floatPart
})

项目中使用的地方
金额格式化,三位数逗号分隔,小数点后保留两位(vue金额过滤器)_第1张图片

注册方式:推荐在filter.js文件里面定义,main.js 里面引入
金额格式化,三位数逗号分隔,小数点后保留两位(vue金额过滤器)_第2张图片
金额格式化,三位数逗号分隔,小数点后保留两位(vue金额过滤器)_第3张图片
部分效果图:
金额格式化,三位数逗号分隔,小数点后保留两位(vue金额过滤器)_第4张图片

你可能感兴趣的:(VUE,vue.js,javascript,前端)