Vue 数字千位分隔符

涉及的数据比较多，写一个过滤器，将所有的数据都过滤一下，挂载到全局，不需要每个页面引用了。

创建一个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)

直接在页面使用

 <div class="total-num">{{totalNum | numberToCurrency}}</div>

Vue 数字千位分隔符相关推荐

JS 数字千位分隔符且保留两位小数
数字千位分隔符且保留两位小数 1.仅需要整数位千位分隔 num.toLocaleString() 2.仅需要保留两位小数 num.toFixed(2) 3.需要千位分隔符且带两位小数 Thousand ...
vue 价格千位分隔符处理
项目需求,实现数字金额千位分隔符格式.意思就是,比如后端返回的数字是24000.00,但是页面上要求我们展示成这种格式24,000.00;如下图: 可以新建一个commom.js,然后代码如下 for ...
JS实现数字自动转换人民币金额（自动格式化输入的数字/千位分隔符）
这个货币转换JS代码,可以实现自动格式化输入的数字,自动千位分隔符 <script> function cc(s){if(/[^0-9\.]/.test(s)) return " ...
vue 全局实现数字千位分隔符格式
封装utils工具: export function numberToCurrencyNo(value) {if (!value) return 0// 获取整数部分const intPart = M ...
万元怎样保留小数点_如何让数字以万元为单位显示并保留2位小数，且有千位分隔符...
B列和C列的数据来自A列.现在要求分别设置B列和C列的单元格格式,显示为:万元保留1位小数,万元保留2位小数显示数字(万元保留1位小数) 1,B列设置单元格格式,单元格自定义格式为:0!.0, 2, ...
word表格数据处理：如何给长数字添加千位分隔符？
我们在工作中难免会遇到一些未设置任何格式的表格数据,这类数据会让读者看起来非常吃力.当碰到这个问题时,如果你只会手动一个个地去设置,那可得忙活半天.而如果你掌握一些整理数据的小技巧,别人半天的工作量, ...
html中写自增数字,WPS word中数字怎么自增如何在word中设置数字的千位分隔符
选中某行,列或者某一部分,选择菜单栏的"行和列"->"填充"选项,选择序列选项. 在弹出的窗口中设置你需要的选项. WPS文字怎样自动增加数字如何在WP ...
HTML数字项目标签千位分隔符,请使用千位分隔符(逗号)表示web网页中的大数字
一.移动端大数值会默认当作电话号码在手机等移动设备上,对于超过一定个数的数值,系统默认会当做电话号码处理,而不是一个数字按照中文用户的使用习惯,有时候个数很多的连续数字其实真的就是一个数字,自动变 ...
python输出数字用逗号隔开_Python用逗号千位分隔符替换中间数字
我有一个像这样的字符串: 123456789.123456789-123456789 在十进制/连字符之前和之后可以有任意数量的数字,我需要做的是删除小数点之前的所有内容,包括小数,并删除连字符和连字 ...

Vue 数字千位分隔符

Vue 数字千位分隔符相关推荐

最新文章

热门文章