广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >vuejs格式化数字为金额格式代码
  • 959
分享到

vuejs格式化数字为金额格式代码

2024-04-02 19:04:59 959人浏览 八月长安
摘要

目录格式化数字为金额格式格式化金额组件格式化数字为金额格式 export const fORMatMoney = (number, decimals = 0, decPoint =

格式化数字为金额格式


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)

以上为个人经验,希望能给大家一个参考,也希望大家多多支持编程网。

--结束END--

本文标题: vuejs格式化数字为金额格式代码

本文链接: https://www.lsjlt.com/news/146744.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • vuejs格式化数字为金额格式代码
    目录格式化数字为金额格式格式化金额组件格式化数字为金额格式 export const formatMoney = (number, decimals = 0, decPoint =...
    99+
    2022-11-13
  • vue金额格式化保留两位小数的实现
    目录金额格式化保留两位小数自定义过滤器 格式化金额(保留两位小数)金额格式化保留两位小数 Vue.filter("number", function(data) {     retu...
    99+
    2022-11-13
  • iOS中金额字符串格式化显示的方法示例
    前言 由于项目中很多地方展现统计金额, 比如在一些金融类的 App 中,对于表示金额类的字符串,通常需要进行格式化后再显示出来。例如: 0 –> 0.00 123 –>...
    99+
    2022-05-23
    金额 字符串 格式化
  • python format格式化和数字格式化
    目录1.format() 基本用法2.填充与对齐3.数字格式化1.format() 基本用法 python2.6 开始,新增了一种格式化字符串的函数str.format(),它增强了...
    99+
    2022-11-13
  • JavaScript如何格式化数字、金额、千分位、保留几位小数、舍入舍去
    小编给大家分享一下JavaScript如何格式化数字、金额、千分位、保留几位小数、舍入舍去,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解...
    99+
    2022-10-19
  • vue将数字转为中文大写金额方式
    目录将数字转为中文大写金额数字(金额)大小写实时转换将数字转为中文大写金额 记得引入vue.js文件 <html lang="en"> <head> <...
    99+
    2022-11-13
    vue数字 vue中文大写金额 vue数字中文大写
  • mysql日期格式如何转为数字格式
    这篇文章主要介绍了mysql日期格式如何转为数字格式的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇mysql日期格式如何转为数字格式文章都会有所收获,下面我们一起来看看吧。 ...
    99+
    2023-02-14
    mysql
  • python format格式化和数字格式化的方法
    这篇“python format格式化和数字格式化的方法”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“python...
    99+
    2023-06-29
  • Dreamweaver代码的格式化功能掌控html代码的格式
    今天偶然发现了Dreamweaver的一个非常有用的功能,就是代码的格式化功能。一般情况下,我们写的html或者css代码都计较混乱,难以阅读,即使刚开始很在意代码的可读性,但是等到所使用的标签越来越多,嵌套越来越深,这...
    99+
    2022-06-12
    格式化 html代码 格式
  • pycharm如何格式化代码
    pycharm格式化代码的方法:1、手动格式化,使用快捷键“Ctrl+Alt+L”来格式化当前文件中的代码;2、自定义代码风格规则,进入“Settings”选项,选择“Editor”,最后选“Code Style”;3、使用Python C...
    99+
    2023-12-09
    pycharm
  • idea如何格式化代码
    本文小编为大家详细介绍“idea如何格式化代码”,内容详细,步骤清晰,细节处理妥当,希望这篇“idea如何格式化代码”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。idea格式化代码的方法:1、直接使用快捷键“Ct...
    99+
    2023-07-05
  • Vue中金额、日期格式化插件@formatjs/intl的使用及说明
    目录Vue金额、日期格式化插件@formatjs/intl使用Intl.NumberFormat用于数字计算数字分组位数控制长度表示字节单位表示复合单位表示百分比表示货币表示质量表示...
    99+
    2023-02-14
    Vue金额 Vue日期格式化 Vue @formatjs Vue intl
  • JavaScript如何格式化JSON代码
    这篇文章主要为大家展示了“JavaScript如何格式化JSON代码”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“JavaScript如何格式化JSON代码”这篇文章吧。格式化JSON代码我们都...
    99+
    2023-06-27
  • Flex Builder 3代码格式化方
    Flex Builder的最新版本已经到了4.5,可是代码格式化工具并没有集成在安装版本中,需要通过其他途径来实现。 下面提供一个安装插件的方法实现Flex代码格式化:      1. 点击菜单中的 Help-> Software ...
    99+
    2023-01-31
    代码 Flex Builder
  • js如何格式化JSON代码
    这篇文章将为大家详细讲解有关js如何格式化JSON代码,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。格式化 JSON 代码相信大家都使用过JSON.stringify方法,该方法可以将一个 Ja...
    99+
    2023-06-17
  • vscode 无法格式化python代码、无法格式化C++代码(vscode格式化失效)另一种解决办法:用外部工具yapf格式化(yapf工具)
    文章目录 我真的解决方法:用yapfyapf工具使用方法示例格式化单个文件(格式化前先用-d参数预先查看格式化更改内容,以决定是否要更改)格式化某个目录递归格式化某个目录 2023071...
    99+
    2023-09-17
    vscode python c++
  • 关于.prettierrc代码格式化配置方式
    目录prettierrc的使用prettierrc规则配置一些问题代码的规范规则很多很繁琐,不可能每个都去手动修改,有时候一个页面能有上百个规范问题,那么这时候代码自动格式化就很有用...
    99+
    2022-11-13
    prettierrc配置 代码格式化 格式化代码prettierrc
  • Vue金融数字格式化(并保留小数)数字滚动效果实现
    目录Vue金融数字格式化(并保留小数) 数字滚动补充:vue做数字滚动效果用vue-countTo实现安装使用Vue金融数字格式化(并保留小数) 数字滚动  提示 &nb...
    99+
    2023-05-16
    vue数字滚动 vue金融数字格式化
  • python字符串格式化函数
    目录​1、​格式化字符串输出​2、​三引号​3、Unicode​4、字符串字母处理函数(补充)知识点:格式化、三引号、Unicode、字符串字母处理函数 ​1、​格式化字符串输出​ ...
    99+
    2022-11-10
  • C#中怎么格式化数字
    这期内容当中小编将会给大家带来有关C#中怎么格式化数字,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。C#数字格式化之格式为sring输出 Label1.Text = string.Format("...
    99+
    2023-06-17
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作