vue全局实现数字千位分隔符格式
更新时间：2021年10月27日 09:04:00 作者：秦浩铖
这篇文章主要为大家详细介绍了vue全局实现数字千位分隔符格式，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了vue全局实现数字千位分隔符格式的具体代码，供大家参考，具体内容如下
这个是啥意思呢 ？ 就是我们在页面上需要渲染数据的时候，比如 88888，我们需要按照千分位显示成方便阅读的格式88,888。
这个时候我的做法是vue写一个过滤器，将所有的数据都用这个过滤器过滤一下。
因为涉及的数据相对比较多，我就将这个过滤器挂载到了全局，这样就不用再每个页面引用了。
转换代码实现
首先创建一个文件 numberToCurrency.js ，实现数字千位分隔符转换功能。
export function numberToCurrencyNo(value) {
if (!value) return 0
// 获取整数部分
const intPart = Math.trunc(value)
// 整数部分处理，增加,
const intPartFormat = intPart.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,')
// 预定义小数部分
let floatPart = ''
// 将数值截取为小数部分和整数部分
const valueArray = value.toString().split('.')
if (valueArray.length === 2) { // 有小数部分
floatPart = valueArray[1].toString() // 取得小数部分
return intPartFormat + '.' + floatPart
}
return intPartFormat + floatPart
}
好了，这样就实现了，当然如果有其他的需求，具体的转换代码得根据实际来修改。
接下来就是引用。
引用挂载全局
在 main.js 文件中引入刚才的过滤器文件，并且挂载到全局。
import { numberToCurrencyNo } from '@/utils/numberToCurrency'
// 配置全局过滤器，实现数字千分位格式
Vue.filter('numberToCurrency', numberToCurrencyNo)
这样子就可以了，然后在具体需要转换的地方使用一下就OK了。
使用
使用的话就是普通过滤器的使用方法。
<p class="num color1">{{riskAll| numberToCurrency}}</p>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
Vue3新属性之css中使用v-bind的方法（v-bind in css）
这篇文章主要介绍了Vue3新属性css中使用v-bind（v-bind in css）的方法，本文结合实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2023-01-01
这篇文章主要介绍了vue-router路由懒加载及实现方式,路由懒加载的主要作用是将 路由对应的组件打包成一个个的js代码块，只有在这个路由被访问到的时候，才会加载对应组件的代码块，需要的朋友可以参考下2022-12-12
使用vue-router beforEach实现判断用户登录跳转路由筛选功能
这篇文章主要介绍了vue使用vue-router beforEach实现判断用户登录跳转路由筛选,本篇文章默认您已经会使用 webpack 或者 vue-cli 来进行环境的搭建，并且具有一定的vue基础。需要的朋友可以参考下2018-06-06
这篇文章主要介绍了在vue.js中，使用echarts组件，创建一个饼图，并且获取饼图的数据和属性，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习吧2022-12-12
这篇文章主要介绍了vue.js中created方法作用及mounted和created的区别介绍，需要的朋友可以参考下2018-03-03
element ui循环调用this.$alert 消息提示只显示最后一个
这篇文章主要介绍了element ui循环调用this.$alert 消息提示只显示最后一个，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-10-10
这篇文章主要为大家详细介绍了vue实现列表倒计时，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-09-09
这篇文章主要介绍了vue element table表格相同名称列合并方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-10-10
这篇文章主要为大家介绍了前端自动化测试Vue中TDD和单元测试示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-02-02
解决ant Design中Select设置initialValue时的大坑
这篇文章主要介绍了解决ant Design中Select设置initialValue时的大坑，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-10-10
最新评论