Vue中全局常用的過(guò)濾方法解讀
更新時(shí)間：2023年01月23日 13:27:13 作者：大佩梨
這篇文章主要介紹了Vue中全局常用的過(guò)濾方法解讀，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
全局引入filter：把寫了方法的js文件映入進(jìn)main.js：import ‘./utils/filter’
1.將整數(shù)部分逢三一斷
例如：12345600 過(guò)濾為 12，345，600
Vue.filter('NumberFormat', function(value) {
? if (!value) {
? ? return '0'
? }
? const intPartFormat = value.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,') // 將整數(shù)部分逢三一斷
? return intPartFormat
})2.將數(shù)據(jù)格式化為金額
2.1有根據(jù)正則格式化
例如 123456 過(guò)濾為 123,456.00
Vue.filter('MoneyFormat', function(number, decimals, symbol) {
? ? if (!decimals) {
? ? ? decimals = 2
? ? }
? ? if (!symbol) {
? ? ? symbol = ''
? ? }
? ? const decPoint = '.'
? ? const thousandsSep = ','
? ? number = (number + '').replace(/[^0-9+-Ee.]/g, '')
? ? const n = !isFinite(+number) ? 0 : +number
? ? const prec = !isFinite(+decimals) ? 0 : Math.abs(decimals)
? ? const sep = (typeof thousandsSep === 'undefined') ? ',' : thousandsSep
? ? const dec = (typeof decPoint === 'undefined') ? '.' : decPoint
? ? let s = ''
? ? const toFixedFix = function(n, prec) {
? ? ? const k = Math.pow(10, prec)
? ? ? return '' + numMulti (n, k) / k
? ? }
? ? s = (prec ? toFixedFix(n, prec) : '' + Math.round(n)).split('.')
? ? const 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 symbol + s.join(dec)
? })上面過(guò)濾為金額的方法需要處理精度丟失問(wèn)題，引入其它文件該numMulti方法如下：
/**
* 乘法運(yùn)算，避免數(shù)據(jù)相乘小數(shù)點(diǎn)后產(chǎn)生多位數(shù)和計(jì)算精度損失。
*
* @param num1被乘數(shù) | num2乘數(shù)
*/
export function numMulti (num1, num2) {
? num1 = num1 || 0
? num2 = num2 || 0
? ?let baseNum = 0
? ?try {
? ? ? ?baseNum += num1.toString().split('.')[1].length
? ?} catch (e) {
? ?}
? ?try {
? ? ? ?baseNum += num2.toString().split('.')[1].length
? ?} catch (e) {
? ?}
? ?return Number(num1.toString().replace('.', '')) * Number(num2.toString().replace('.', '')) / Math.pow(10, baseNum)
}2.1.格式化貨幣
我經(jīng)常需要格式化貨幣，它需要遵循以下規(guī)則：
123456789 => 123,456,789
123456789.123 => 123,456,789.123
const formatMoney = (money) => {
? return money.replace(new RegExp(`(?!^)(?=(\\d{3})+${money.includes('.') ? '\\.' : '$'})`, 'g'), ',') ?
}
formatMoney('123456789') // '123,456,789'
formatMoney('123456789.123') // '123,456,789.123'
formatMoney('123') // '123'3.展示時(shí)，字?jǐn)?shù)超出10個(gè)字的后面省略
用…展示代替：
? filters: {
? ? itemDescFilter: function (value) {
? ? ? if (!value) {
? ? ? ? return ''
? ? ? }
? ? ? value = value.toString()
? ? ? if (value.length <= 10) {
? ? ? ? return value
? ? ? } else {
? ? ? ? return value.substr(0, 10) + ' . . .'
? ? ? }
? ? }
? },
效果如下：
4.格式化日期為YYYY-MM-DD
創(chuàng)建filters.js文件并安裝、導(dǎo)入moment改文件，把filters導(dǎo)入到main.js中全局使用，
全局過(guò)濾器，格式化日期為YYYY-MM-DD / 格式化日期為YYYY-MM-DD HH:mm:ss
Vue.filter('dayjs', function(dataStr, pattern = 'YYYY-MM-DD') {
return moment(dataStr).format(pattern)
})
如下，完成數(shù)據(jù)格式化，例如其中的text為2022-04-02 11:11:11，經(jīng)過(guò)改過(guò)濾器后展示的數(shù)據(jù)為2022-04-02
5.格式化日期為YYYY-MM-DD HH:mm:ss
Vue.filter('moment', function(dataStr, pattern = 'YYYY-MM-DD HH:mm:ss') {
? return moment(dataStr).format(pattern)
})具體使用同第4點(diǎn)
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue router總結(jié) $router和$route及router與 router與route區(qū)別
這篇文章主要介紹了vue router總結(jié) $router和$route及router與 router與route區(qū)別，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下2019-07-07
這篇文章主要介紹了vue?input組件如何設(shè)置失焦與聚焦，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
解決vue-photo-preview 異步圖片放大失效的問(wèn)題
這篇文章主要介紹了解決vue-photo-preview 異步圖片放大失效的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-07-07
VUE項(xiàng)目axios請(qǐng)求頭更改Content-Type操作
這篇文章主要介紹了VUE項(xiàng)目axios請(qǐng)求頭更改Content-Type操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-07-07
vue.js的vue-cli腳手架中使用百度地圖API的實(shí)例
今天小編就為大家分享一篇關(guān)于vue.js的vue-cli腳手架中使用百度地圖API的實(shí)例，小編覺得內(nèi)容挺不錯(cuò)的，現(xiàn)在分享給大家，具有很好的參考價(jià)值，需要的朋友一起跟隨小編來(lái)看看吧2019-01-01
websocket實(shí)現(xiàn)的全雙工通信,真真太香了,下面這篇文章主要給大家介紹了關(guān)于前端之vue3使用WebSocket的詳細(xì)步驟,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-11-11
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)文件上傳功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
vue中點(diǎn)擊按鈕下載文件的實(shí)現(xiàn)方式
這篇文章主要介紹了vue中點(diǎn)擊按鈕下載文件的實(shí)現(xiàn)方式,具有很的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
這篇文章主要介紹了vue窗口變化onresize,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-08-08
vue項(xiàng)目打包部署跨域的實(shí)現(xiàn)步驟
在前端 Vue 項(xiàng)目打包后，如果需要訪問(wèn)另一個(gè)域名下的接口，由于瀏覽器的同源策略限制，會(huì)出現(xiàn)跨域問(wèn)題，本文就介紹一下vue項(xiàng)目打包部署跨域的實(shí)現(xiàn)步驟，感興趣的可以了解一下2023-05-05