vue js格式化数字为金额格式代码

目录
  • 格式化数字为金额格式
  • 格式化金额组件

格式化数字为金额格式

/**
 * @description 格式化金额
 * @param number：要格式化的数字
 * @param decimals：保留几位小数 默认0位
 * @param decPoint：小数点符号 默认.
 * @param thousandsSep：千分位符号 默认为,
 */
export const formatMoney = (number, decimals = 0, decPoint = '.', thousandsSep = ',') => {
  number = (number + '').replace(/[^0-9+-Ee.]/g, '')
  let n = !isFinite(+number) ? 0 : +number
  let prec = !isFinite(+decimals) ? 0 : Math.abs(decimals)
  let sep = (typeof thousandsSep === 'undefined') ? ',' : thousandsSep
  let dec = (typeof decPoint === 'undefined') ? '.' : decPoint
  let s = ''
  let toFixedFix = function (n, prec) {
    let k = Math.pow(10, prec)
    return '' + Math.ceil(n * k) / k
  }
  s = (prec ? toFixedFix(n, prec) : '' + Math.round(n)).split('.')
  let re = /(-?\d+)(\d{3})/
  while (re.test(s[0])) {
    s[0] = s[0].replace(re, '$1' + sep + '$2')
  }
  if ((s[1] || '').length < prec) {
    s[1] = s[1] || ''
    s[1] += new Array(prec - s[1].length + 1).join('0')
  }
  return s.join(dec)
}

格式化金额组件

尤雨溪git下载，这里是引入

const digitsRE = /(\d{3})(?=\d)/g
export function currency(value, currency, decimals) {
  value = parseFloat(value)
  if (!isFinite(value) || (!value && value !== 0)) return ''
  currency = currency != null ? currency : '$'
  decimals = decimals != null ? decimals : 2
  var stringified = Math.abs(value).toFixed(decimals)
  var _int = decimals ?
    stringified.slice(0, -1 - decimals) :
    stringified
  var i = _int.length % 3
  var head = i > 0 ?
    (_int.slice(0, i) + (_int.length > 3 ? ',' : '')) :
    ''
  var _float = decimals ?
    stringified.slice(-1 - decimals) :
    ''
  var sign = value < 0 ? '-' : ''
  return sign + currency + head +
    _int.slice(i).replace(digitsRE, '$1,') +
    _float
}

使用

导入js文件，因为是根据函数名导出，所以，导入需要进行解构

import { currency } from "@/util/currency";
export default {
    .........
    // 局部过滤器
  filters: {
    currency: currency,
  },
 }  

格式化组件使用

 <div class="item-total">
   <span>{{totalPrice | currency('$')}}</span>
</div>

如果在全局使用

main.js
import {
  currency
} from "@/util/currency";
Vue.filter('currency', currency)

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • Vue自定义过滤器格式化数字三位加一逗号实现代码

    Vue自定义过滤器格式化数字三位加一逗号实现代码

    前端处理一些金额,数字类的数据要求按照固定的格式显示,比如9,527,025,或者带有小数(如1,587.23)仍要三位一断.有些话也不必多说,既然要求如此,实现呗. 作为前端主流框架之一的Vue,类似的功能肯定都有人写的很完善了.我呢,最讨厌不动脑筋去网上找现成的,所以我自己写了一个.话不多说,先放效果图再贴代码(为了展现思路,我面向过程写的,另外这个是针对保留两位小数的数字进行过滤,因为保留整数的太简单了). <!DOCTYPE html> <html> <head>

  • vue.js实现价格格式化的方法

    vue.js实现价格格式化的方法

    这里分享一个常用的价格格式化的一个方法,在电商的价格处理中非常的实用,我们可以看一个效果 这里在价格数据的地方使用了一个过滤器,通过这个过滤器对价格做了保留小数位的处理. HTML <div class="price"> <span v-html="goods.sale_price|format"></span> <span class="price-before">￥{{＂这里是价格数据＂}}&l

  • vue通过过滤器实现数据格式化

    一.本节说明 在使用插值表达式的时候,我们通常会有一种需求,就是将数据进行二次的格式化.VUE的过滤器的实现参考了linux的shell命令的管道的实现原理:即上一个命令的输出,是下一个命令的输入. 所以过滤器可以串接使用:{{数据 | 过滤器A | 过滤器B}} 除了在插值表达式中可以使用过滤器,在后文中将要学习到的v-bind指令中也可以使用过滤器.用法是一致的,到时候我们再看一看. 二. 怎么做 全局过滤器(定义一个用于做日期格式化的过滤器) 过滤器的第一个参数是固定的,就是输入的数据.对

  • vue element-ui实现input输入框金额数字添加千分位

    在util.js中定义方法 包含金额添加过滤千分位,验证金额格式等 const MoneyTest = /((^[1-9]\d*)|^0)(\.\d{0,2}){0,1}$/; // 金额添加千分位 const comdify = function (n) { if(!n) return n; let str = n.split('.'); let re = /\d{1,3}(?=(\d{3})+$)/g; let n1 = str[0].replace(re, "$&,");

  • vue js格式化数字为金额格式代码

    目录 格式化数字为金额格式 格式化金额组件 格式化数字为金额格式 /** * @description 格式化金额 * @param number:要格式化的数字 * @param decimals:保留几位小数 默认0位 * @param decPoint:小数点符号 默认. * @param thousandsSep:千分位符号 默认为, */ export const formatMoney = (number, decimals = 0, decPoint = '.', thousand

  • js实现的格式化数字和金额功能简单示例

    本文实例讲述了js实现的格式化数字和金额功能.分享给大家供大家参考,具体如下: 格式化数字,格式化金额: function number_format(number, decimals, dec_point, thousands_sep) { /* * 参数说明: * number:要格式化的数字 * decimals:保留几位小数 * dec_point:小数点符号 * thousands_sep:千分位符号 * */ number = (number + '').replace(/[^0-9

  • JavaScript 格式化数字、金额、千分位、保留几位小数、舍入舍去

    前端开发中经常会碰到用 JavaScript?格式化数字,最最常见的是格式化金额,一般格式化金额需要千分位分隔,保留2位小数等等. 简单的功能函数 类似的代码网上有很多: /** * 将数值四舍五入(保留2位小数)后格式化成金额形式 * * @param num 数值(Number或者String) * @return 金额格式的字符串,如'1,234,567.45' * @type String */ function formatCurrency(num) { num = num.toStr

  • JS格式化数字（每三位加逗号）的方法总结

    方法一 function toThousands(num) { var result = [ ], counter = 0; num = (num || 0).toString().split(''); for (var i = num.length - 1; i >= 0; i--) { counter++; result.unshift(num[i]); if (!(counter % 3) && i != 0) { result.unshift(','); } } return

  • Vue.js实现输入框绑定的实例代码

    Vue.js实现输入框绑定的实例代码

    实现效果如下: 实现代码及注释 <!DOCTYPE html> <html> <head> <title>vue.js数据动态编辑</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style type=

  • Angular.js 实现数字转换汉字实例代码

    AngularJS 简介 AngularJS 是一个 JavaScript 框架.它可通过 <script> 标签添加到 HTML 页面. AngularJS 通过 指令 扩展了 HTML,且通过 表达式 绑定数据到 HTML. 下面通过本文给大家介绍Angular.js 实现数字转换汉字实例代码,具体代码如下所示: // 1.实现输入数字输出对应汉字,要求使用angularjs,不准使用$watch函数,for循环:提示:ng-change指令 <div ng-app="my

  • vue.js自定义组件directives的实例代码

    自定义指令:以v开头,如:v-mybind. 代码示例: <input v-mybind /> directives:{ mybind:{ bind:function (el) { el.value = "this is mybind-bind" } }} 这时页面初始化时,input中会显示this is mybind-bind. 通过directives注册自定义指令mybind,每一个自定义指令中又提供若干钩子,如示例中的bind,bind的作用是定义一个在绑定时执行

  • 关于vue.js中实现方法内某些代码延时执行

    今天在工作时遇见了某些代码需要延时操作的情况.具体情况为前台grid在执行完增删改操作后需要在增加或者修改弹框点击确定导致弹框消失后,grid内数据能够及时更新以便显示增删改操作后的数据.这里的话使用的是vue.js中的setTimeout函数来解决该问题. 代码如下: var that = this; setTimeout(function () { that.modifyDialogVisible = false; grid.api.reloadData(); },500); 值得注意的是这

  • JS格式化数字金额用逗号隔开保留两位小数

    例如: 12345格式化为12,345.00 12345.6格式化为12,345.60 12345.67格式化为 12,345.67 只留两位小数. 回来后写了个格式化函数.可以控制小数位数,自动四舍五入. 代码如下: 复制代码 代码如下: function fmoney(s, n) { n = n > 0 && n <= 20 ? n : 2; s = parseFloat((s + "").replace(/[^\d\.-]/g, ""

  • 基于Vue.js实现数字拼图游戏

    基于Vue.js实现数字拼图游戏

    先来看看效果图: 功能分析 当然玩归玩,作为一名Vue爱好者,我们理应深入游戏内部,一探代码的实现.接下来我们就先来分析一下要完成这样的一个游戏,主要需要实现哪些功能.下面我就直接将此实例的功能点罗列在下了: 1.随机生成1~15的数字格子,每一个数字都必须出现且仅出现一次 2.点击一个数字方块后,如其上下左右有一处为空,则两者交换位置 3.格子每移动一步,我们都需要校验其是否闯关成功 4.点击重置游戏按钮后需对拼图进行重新排序 以上便是本实例的主要功能点,可见游戏功能并不复杂,我们只需一个个攻

随机推荐