vue js格式化數(shù)字為金額格式代碼
更新時(shí)間:2022年04月21日 10:25:04 作者:~冰蝶~
這篇文章主要介紹了vue js格式化數(shù)字為金額格式代碼,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
格式化數(shù)字為金額格式
/** * @description 格式化金額 * @param number:要格式化的數(shù)字 * @param decimals:保留幾位小數(shù) 默認(rèn)0位 * @param decPoint:小數(shù)點(diǎn)符號(hào) 默認(rèn). * @param thousandsSep:千分位符號(hào) 默認(rèn)為, */ 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 }
使用
導(dǎo)入js文件,因?yàn)槭歉鶕?jù)函數(shù)名導(dǎo)出,所以,導(dǎo)入需要進(jìn)行解構(gòu)
import { currency } from "@/util/currency"; export default { ?? ?......... ?? ?// 局部過(guò)濾器 ? filters: { ? ? currency: currency, ? }, ?} ?
格式化組件使用
?<div class="item-total"> ? ?<span>{{totalPrice | currency('$')}}</span> </div>
如果在全局使用
main.js import { ? currency } from "@/util/currency"; Vue.filter('currency', currency)
以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
Element-ui table中過(guò)濾條件變更表格內(nèi)容的方法
下面小編就為大家分享一篇Element-ui table中過(guò)濾條件變更表格內(nèi)容的方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-03-03vue中props賦值給data出現(xiàn)的問(wèn)題及解決
這篇文章主要介紹了vue中props賦值給data出現(xiàn)的問(wèn)題及解決,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-10-10Vue組件傳值過(guò)程中丟失數(shù)據(jù)的分析與解決方案
這篇文章主要給大家介紹了關(guān)于Vue組件傳值過(guò)程中丟失數(shù)據(jù)的分析與解決方案,文中通過(guò)圖文介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-03-03vue-cli系列之vue-cli-service整體架構(gòu)淺析
這篇文章主要介紹了vue-cli系列之vue-cli-service整體架構(gòu)淺析,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-01-01