vue實(shí)現(xiàn)的封裝全局filter并統(tǒng)一管理操作示例
本文實(shí)例講述了vue實(shí)現(xiàn)的封裝全局filter并統(tǒng)一管理操作。分享給大家供大家參考，具體如下：
在前后端分離的項(xiàng)目中，經(jīng)常會(huì)有后臺(tái)返回的數(shù)據(jù)需要進(jìn)過(guò)處理才能顯示到頁(yè)面上的場(chǎng)景。
使用最多的場(chǎng)景就是日期和時(shí)間的處理，后臺(tái)一般返回的都是時(shí)間戳，那么我們就要對(duì)時(shí)間戳進(jìn)行處理。
下面就拿封裝全局的處理日期和時(shí)間的 filter 來(lái)展示如何 vue 如何封裝全局 filter 并統(tǒng)一處理。
在 src 目錄下新建 filters 目錄用來(lái)專(zhuān)門(mén)存放全局過(guò)濾器，如果項(xiàng)目的過(guò)濾器過(guò)多，那么就要按類(lèi)型分類(lèi)。
我司的項(xiàng)目需要前臺(tái)處理的數(shù)據(jù)不是太多，那么就在 filters 目錄下新建一個(gè) index.js 來(lái)存放所有的過(guò)濾器就足夠了。
index.js 代碼如下：
/*
日期處理
time：源時(shí)間戳
type：要處理的格式 默認(rèn) xxxx年xx月xx日
/: xxxx/xx/xx
.: xxxx.xx.xx
-: xxxx-xx-xx
*/
export const normalDate = (time,type) => {
if (time) {
var date = new Date();
date.setTime(time);
var year = date.getFullYear();
var month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) * 1 : date.getMonth() + 1;
var day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate();
if(type == '-'){
return year + '-' + month + '-' + day;
}else if(type == '/'){
return year + '/' + month + '/' + day;
}else if(type == '.'){
return year + '.' + month + '.' + day;
}else{
return year + '年' + month + '月' + day + '日';
}
}
}
/*
時(shí)間處理
time：源時(shí)間戳
type：要處理的格式 默認(rèn) xxxx年xx月xx日 xx:xx:xx
/: xxxx/xx/xx xx:xx:xx
.: xxxx.xx.xx xx:xx:xx
-: xxxx-xx-xx xx:xx:xx
*/
export const normalTime = (time,type) => {
if (time) {
var date = new Date();
date.setTime(time);
var year = date.getFullYear();
var month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) * 1 : date.getMonth() + 1;
var day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate();
var hours = date.getHours() < 10 ? '0' + date.getHours() : date.getHours();
var minutes = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes();
var seconds = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds();
if(type == '-'){
return year + '-' + month + '-' + day + ' ' + hours + ':' + minutes + ':' + seconds;
}else if(type == '/'){
return year + '/' + month + '/' + day + ' ' + hours + ':' + minutes + ':' + seconds;
}else if(type == '.'){
return year + '.' + month + '.' + day + ' ' + hours + ':' + minutes + ':' + seconds;
}else{
return year + '年' + month + '月' + day + '日' + ' ' + hours + ':' + minutes + ':' + seconds;
}
}
}
然后在 main.js 中引入注冊(cè)即可使用：
import * as filters from './filters' Object.keys(filters).forEach(key => Vue.filter(key, filters[key]));
在頁(yè)面中使用：
<p>{{time | normalDate('/')}}</p> //這樣時(shí)間戳就會(huì)轉(zhuǎn)化為xxxx/xx/xx的格式
希望本文所述對(duì)大家vue.js程序設(shè)計(jì)有所幫助。
相關(guān)文章
解決vue前端rsa加密遇到的問(wèn)題message too long for RS
這篇文章主要介紹了解決vue前端rsa加密遇到的問(wèn)題message too long for RSA,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-07-07
Element UI 上傳組件實(shí)現(xiàn)文件上傳并附帶額外參數(shù)功能
在使用 ElementUI 的上傳組件 el-upload 實(shí)現(xiàn)文件上傳功能時(shí),如果單文件上傳是比較簡(jiǎn)單的,但是在實(shí)際需求中,往往會(huì)在上傳文件時(shí)伴隨著一些其他參數(shù),怎么操作呢,下面通過(guò)示例代碼講解感興趣的朋友一起看看吧2023-08-08
Vue計(jì)算屬性中reduce方法實(shí)現(xiàn)遍歷方式
這篇文章主要介紹了Vue計(jì)算屬性中reduce方法實(shí)現(xiàn)遍歷方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-03-03
在vue中使用css modules替代scroped的方法
本篇文章主要介紹了在vue中使用css modules替代scroped的方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-03-03
本篇文章主要介紹了詳解webpack打包vue時(shí)提取css，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-05-05
vue子組件中使用window.onresize()只執(zhí)行一次問(wèn)題
這篇文章主要介紹了vue子組件中使用window.onresize()只執(zhí)行一次問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-08-08
vscode 配置vue+vetur+eslint+prettier自動(dòng)格式化功能
這篇文章主要介紹了vscode 配置vue+vetur+eslint+prettier自動(dòng)格式化功能，本文通過(guò)實(shí)例代碼圖文的形式給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-03-03
Vue3帶來(lái)了許多性能優(yōu)化和效率提升的特性，本文將重點(diǎn)討論Vue3在靜態(tài)提升、預(yù)字符串化、緩存事件處理函數(shù)、Block?Tree和PatchFlag方面的改進(jìn)，我們將通過(guò)對(duì)比Vue2和Vue3的編譯結(jié)果來(lái)說(shuō)明這些方面的效率提升2023-12-12
vue中使用scrollTo沒(méi)有效果的完美解決方法
這篇文章主要介紹了在vue中使用scrollTo沒(méi)有效果的解決方法,本文給大家分享具體操作步驟,在這里需要注意scrollTo要作用在可滾動(dòng)的元素上,不然不生效,scrollTop就會(huì)一直為0,需要的朋友可以參考下2023-10-10
解決Vue.js由于延時(shí)顯示了{(lán){message}}引用界面的問(wèn)題
今天小編就為大家分享一篇解決Vue.js由于延時(shí)顯示了{(lán){message}}引用界面的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-08-08