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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • Vue插值、表达式、分隔符、指令知识小结

    最近打算重温一遍vue的知识,正好总结一份笔记. 插值 基本用法 <span>Text:{{text}}</span> <span v-text="text"></span> 这个属于指令 <li data-id="{{id}}"></li> 有时候只需要渲染一次数据,后续数据变化不再关心,可以通过"*"实现 <span>Text:{{*text}}</sp

  • vue全局实现数字千位分隔符格式

    vue全局实现数字千位分隔符格式

    本文实例为大家分享了vue全局实现数字千位分隔符格式的具体代码,供大家参考,具体内容如下 这个是啥意思呢 ? 就是我们在页面上需要渲染数据的时候,比如 88888,我们需要按照千分位显示成方便阅读的格式88,888. 这个时候我的做法是vue写一个过滤器,将所有的数据都用这个过滤器过滤一下. 因为涉及的数据相对比较多,我就将这个过滤器挂载到了全局,这样就不用再每个页面引用了. 转换代码实现 首先创建一个文件 numberToCurrency.js ,实现数字千位分隔符转换功能. export f

  • Javascript 正则表达式实现为数字添加千位分隔符

    最近在网上有看到使用js来实现数字的千位分隔符的面试(笔试)题,所以就自己写了一个利用"正则+replace"来实现的方法: 复制代码 代码如下: var thousandBitSeparator = function(numStr){      var b = /([-+]?\d{3})(?=\d)/g;      return numStr.replace(b, function($0, $1){          return $1 + ',';      });  } 支持正负

  • JS实现的4种数字千位符格式化方法分享

    所谓的数字千分位形式,即从个位数起,每三位之间加一个逗号.例如"10,000".针对这个需求,我起初写了这样一个函数: 复制代码 代码如下: // 方法一 function toThousands(num) {     var result = [ ], counter = 0;     num = (num || 0).toString().split('');     for (var i = num.length - 1; i >= 0; i--) {         co

  • php number_format() 函数通过千位分组来格式化数字的实现代码

    定义和用法number_format() 函数通过千位分组来格式化数字. 语法number_format(number,decimals,decimalpoint,separator) 参数描述number 必需.要格式化的数字.如果未设置其他参数,则数字会被格式化为不带小数点且以逗号 (,) 作为分隔符. decimals可选.规定多少个小数.如果设置了该参数,则使用点号 (.) 作为小数点来格式化数字. decimalpoint可选.规定用作小数点的字符串. separator 可选.规定用

  • angular 实现的输入框数字千分位及保留几位小数点功能示例

    本文实例讲述了angular 实现的输入框数字千分位及保留几位小数点功能.分享给大家供大家参考,具体如下: 网上查到一个关于千分位的指令,我稍微做了点完善,通用指令代码 myApp.directive('price', function($parse) { return { link: function (scope, element, attrs, ctrl) { //控制输入框只能输入数字和小数点 function limit(){ var limitV=element[0].value;

  • Javascript将数字转化成为货币格式字符串

    这里第一个方法是用JavaScript将数字number转换为货币字符串的格式(参数:保留小数位数,货币符号,整数部分千位分隔符,小数分隔符) 这里第二个方法是用简单的正则表达式将货币字符换转换为纯净的数字字符串,之后便可以将字符串转换为数字number JavaScript Money Format(用prototype对Number进行扩展) // Extend the default Number object with a formatMoney() method: // usage:

  • php 带逗号千位符数字的处理方法

    通常用number_format(); 来格式化数字,默认情况千位符是用逗号间隔的,比如: 复制代码 代码如下: echo number_format("10000.01231", 2); //取小数点后2位,输出的结果为:10,000.01 千位默认是用逗号间隔. 如果我们后台验证从客户端获取来的这种格式的数字就有点费劲了. 老修通常用 filter_input(INPUT_POST,"price",FILTER_VALIDATE_FLOAT) 来验证价格,如果是

  • 数字金额千位分隔的Javascript

    将数字金额进行千位分隔 //将数字金额进行千位分隔 function formatNum(theObj){ var digit = theObj.value.indexOf("."); // 取得小数点的位置 var int = theObj.value.substr(0,digit); // 取得小数中的整数部分 var i; var mag = new Array(); var word; if (theObj.value.indexOf(".") == -1)

  • java使用正则表达为数字添加千位符的简单方法

    Java支持的正则表达式很完善,利用零宽断言可以用一句话为整数添加千位符. 复制代码 代码如下: "1234567890".replaceAll("(?<=\\d)(?=(?:\\d{3})+$)", ",");// => 1,234,567,890

  • JAVA数字千分位和小数点的现实代码(处理金额问题)

    金融类等项目通常对于金额较大的字段,通常要求千分位显示,数字保留两位小数,分装工具类方便以后工作需要: 说明: 1.井号(#)表示一位数字,逗号是用于分组分隔符的占位符,点是小数点的占位符. 2.如果小数点的右面,值有三位,但是式样只有两位.format方法通过四舍五入处理. 3.0 - 如果对应位置上没有数字,则用零代替 4.# - 如果对应位置上没有数字,则保持原样(不用补):如果最前.后为0,则保持为空. 5.正负数模板用分号(;)分割 方法一: package com.mo.util;

随机推荐