Vue中全局常用的過濾方法解讀
更新時間：2023年01月23日 13:27:13 作者：大佩梨
這篇文章主要介紹了Vue中全局常用的過濾方法解讀，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
全局引入filter：把寫了方法的js文件映入進main.js：import ‘./utils/filter’
1.將整數(shù)部分逢三一斷
例如：12345600 過濾為 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 過濾為 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)
? })上面過濾為金額的方法需要處理精度丟失問題，引入其它文件該numMulti方法如下：
/**
* 乘法運算，避免數(shù)據(jù)相乘小數(shù)點后產(chǎn)生多位數(shù)和計算精度損失。
*
* @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ù)超出10個字的后面省略
用…展示代替：
? 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中全局使用，
全局過濾器，格式化日期為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)過改過濾器后展示的數(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點
總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue router總結(jié) $router和$route及router與 router與route區(qū)別
這篇文章主要介紹了vue router總結(jié) $router和$route及router與 router與route區(qū)別，本文給大家介紹的非常詳細，具有一定的參考借鑒價值 ,需要的朋友可以參考下2019-07-07
這篇文章主要介紹了vue?input組件如何設(shè)置失焦與聚焦，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
解決vue-photo-preview 異步圖片放大失效的問題
這篇文章主要介紹了解決vue-photo-preview 異步圖片放大失效的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
這篇文章主要介紹了VUE項目axios請求頭更改Content-Type操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
vue.js的vue-cli腳手架中使用百度地圖API的實例
今天小編就為大家分享一篇關(guān)于vue.js的vue-cli腳手架中使用百度地圖API的實例，小編覺得內(nèi)容挺不錯的，現(xiàn)在分享給大家，具有很好的參考價值，需要的朋友一起跟隨小編來看看吧2019-01-01
websocket實現(xiàn)的全雙工通信,真真太香了,下面這篇文章主要給大家介紹了關(guān)于前端之vue3使用WebSocket的詳細步驟,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-11-11
這篇文章主要為大家詳細介紹了vue實現(xiàn)文件上傳功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
這篇文章主要介紹了vue中點擊按鈕下載文件的實現(xiàn)方式,具有很的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
這篇文章主要介紹了vue窗口變化onresize,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-08-08
在前端 Vue 項目打包后，如果需要訪問另一個域名下的接口，由于瀏覽器的同源策略限制，會出現(xiàn)跨域問題，本文就介紹一下vue項目打包部署跨域的實現(xiàn)步驟，感興趣的可以了解一下2023-05-05