Vue的filters(本地)或filter(全局)過(guò)濾常用數(shù)據(jù)類型解析
更新時(shí)間：2022年07月27日 09:43:44 作者：你摯愛(ài)的強(qiáng)哥
這篇文章主要介紹了Vue的filters(本地)或filter(全局)過(guò)濾常用數(shù)據(jù)類型，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
filters(本地)或filter(全局)過(guò)濾常用數(shù)據(jù)類型
情況一：后臺(tái)給的日期是Sat Jul 31 2021 21:50:01 GMT+0800 (中國(guó)標(biāo)準(zhǔn)時(shí)間)，如果直接呈現(xiàn)給用戶，他們一定會(huì)吐槽你不說(shuō)人話~~~
情況二：后臺(tái)給的百分?jǐn)?shù)是小數(shù)沒(méi)有轉(zhuǎn)化成00%格式
采用vue的過(guò)濾機(jī)制就可以解決這種情況，有兩種方式：
第一種：全局寫法，在main.js里面加入
// 【全局過(guò)濾】----------------------------------------
?
//轉(zhuǎn)換情況一的日期
Vue.filter('yyyy_MM_dd', v => {
? ? if (v) return new Date(v)
? ? ? ? .toLocaleString("zh-Hans-CN", {
? ? ? ? ? ? year: "numeric",
? ? ? ? ? ? month: "2-digit",
? ? ? ? ? ? day: "2-digit",
? ? ? ? }).replace(/\//g, "-");
? ? else return '';
});
?
//轉(zhuǎn)換情況二的百分?jǐn)?shù)
Vue.filter('percent', v => {
? ? if (v) return ?Math.abs(v.toFixed(2)) + "%";
? ? else return 0;
});第二種：本地寫法，在vue文件頁(yè)面的<script></script>里面加入
? filters: {
? ? //轉(zhuǎn)換情況一的日期
? ? yyyy_MM_dd: (v) => {
? ? ? if (v)
? ? ? ? return new Date(v)
? ? ? ? ? .toLocaleString("zh-Hans-CN", {
? ? ? ? ? ? year: "numeric",
? ? ? ? ? ? month: "2-digit",
? ? ? ? ? ? day: "2-digit",
? ? ? ? ? })
? ? ? ? ? .replace(/\//g, "-");
? ? ? else return "";
? ? },
?
? ? //轉(zhuǎn)換情況二的百分?jǐn)?shù)
? ? percent: (v) => {
? ? ? if (v) return Math.abs(v.toFixed(2)) + "%";
? ? ? else return 0;
? ? },
? },然后在綁定對(duì)應(yīng)數(shù)據(jù)的地方用豎線“|”跟上對(duì)應(yīng)的過(guò)濾方法就可以了
{{ 日期 | yyyy_MM_dd }}
{{ 小數(shù) | percent }}
/*額外知識(shí)：
過(guò)濾器還支持串聯(lián)，也就是多個(gè) | filterName | filterName | ... 這樣可以綜合在一起使用多個(gè)過(guò)濾功能。
過(guò)濾器是 JavaScript 函數(shù)，因此可以接收參數(shù)：
{{ string | filter('參數(shù)1', 參數(shù)2) }}
這里，filter被定義為接收三個(gè)參數(shù)的過(guò)濾器函數(shù)。其中 string 的值作為第一個(gè)參數(shù)，普通字符串 '參數(shù)1' 作為第二個(gè)參數(shù)，表達(dá)式 參數(shù)2 的值作為第三個(gè)參數(shù)。
*/Vue 全局常用的過(guò)濾方法
全局引入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.2.格式化貨幣
我經(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)以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue刷新子組件、重置組件以及重新加載子組件項(xiàng)目實(shí)戰(zhàn)記錄
在vue開(kāi)發(fā)中出于各種目的,我們常常需要讓組件重新加載渲染,這篇文章主要給大家介紹了關(guān)于vue刷新子組件、重置組件以及重新加載子組件的相關(guān)資料,需要的朋友可以參考下2023-12-12
這篇文章主要為大家介紹了vue編譯器util工具使用方法示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
本文主要介紹了Vue3.2+Ts組件之間通信的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-06-06
本篇文章主要介紹了vue源碼看觀察者模式，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-01-01
vue+video.js視頻播放、視頻切換、視頻斷點(diǎn)分段上傳功能
本次需求是做一個(gè)視頻列表，點(diǎn)擊視頻列表播放對(duì)應(yīng)視頻；同時(shí)要求實(shí)現(xiàn)斷點(diǎn)分段上傳大文件（視頻）的功能,今天通過(guò)本文給大家講解下vue+video.js視頻播放、視頻切換、視頻斷點(diǎn)分段上傳功能，感興趣的朋友一起看看吧2022-12-12
<script setup>是在單文件組件中使用Composition API的編譯時(shí)語(yǔ)法糖,下面這篇文章主要給大家介紹了關(guān)于vue3:setup語(yǔ)法糖使用的相關(guān)資料,需要的朋友可以參考下2022-08-08
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)多級(jí)菜單效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-10-10
vue3采用xlsx庫(kù)實(shí)現(xiàn)本地上傳excel文件功能
這篇文章主要為大家詳細(xì)介紹了vue3如何采用xlsx庫(kù)實(shí)現(xiàn)本地上傳excel文件功能,并且前端解析為Json數(shù)據(jù),感興趣的小伙伴可以了解一下2025-02-02
vxe-table?使用?vxe-upload?在表格中實(shí)現(xiàn)非常強(qiáng)大的粘貼上傳圖片和附件功能
本文通過(guò)實(shí)例代碼介紹了vxe-table渲染器的強(qiáng)大功能,配合 vxe-upload 上傳,比如復(fù)制或者截圖一張圖片,通過(guò)粘貼方式快速粘貼到單元格中,能支持單張、多張、查看、預(yù)覽功能,感興趣的朋友跟隨小編一起看看吧2024-12-12
element--Diaolog彈窗打開(kāi)之后渲染組件方式
這篇文章主要介紹了element--Diaolog彈窗打開(kāi)之后渲染組件方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-01-01