Vue中全局常用的過濾方法解讀
更新時間：2023年01月23日 13:27:13 作者：大佩梨
這篇文章主要介紹了Vue中全局常用的過濾方法解讀，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
全局引入filter：把寫了方法的js文件映入進(jìn)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.展示時，字?jǐn)?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?cli3?chainWepack使用方法示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-11-11
vue中的echarts實現(xiàn)寬度自適應(yīng)的解決方案
這篇文章主要介紹了vue中的echarts實現(xiàn)寬度自適應(yīng),本文給大家分享實現(xiàn)方案，代碼簡單易懂，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-09-09
解決vue與node模版引擎的渲染標(biāo)記{{}}(雙花括號)沖突問題
這篇文章主要介紹了解決vue與node模版引擎的渲染標(biāo)記{{}}(雙花括號)沖突問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09
vue項目中data數(shù)據(jù)之間互相訪問的實現(xiàn)
本文主要介紹了vue項目中data數(shù)據(jù)之間互相訪問的實現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-05-05
這篇文章主要介紹了vue 配置多頁面應(yīng)用的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-10-10
這篇文章主要介紹了vue做網(wǎng)頁開場視頻的實例代碼,需要的朋友可以參考下2017-10-10
移動端頁面適配，rem和vw適配方案，本文主要介紹了vue項目中使用rem替換px的實現(xiàn)示例，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-07-07
這篇文章主要介紹了Vue如何使用CSS自定義變量，幫助大家更好的理解和學(xué)習(xí)使用vue框架，感興趣的朋友可以了解下2021-05-05
這篇文章主要介紹了vue實現(xiàn)登錄注冊模板的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-04-04
這篇文章主要為大家詳細(xì)介紹了Vue-Quill-Editor富文本編輯器的使用教程，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-09-09