vue3实现金额千位分隔符
时间: 2023-11-08 22:04:50 浏览: 75
可以使用 Vue3 的过滤器来实现金额千位分隔符。具体实现代码如下:
```javascript
//定义金额千位分隔符过滤器
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>
```
相关推荐
![docx](https://img-home.csdnimg.cn/images/20210720083331.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)