vue實(shí)現(xiàn)的封裝全局filter并統(tǒng)一管理操作示例
更新時(shí)間：2020年02月02日 10:01:35 作者：不想寫代碼的碼農(nóng)
這篇文章主要介紹了vue實(shí)現(xiàn)的封裝全局filter并統(tǒng)一管理操作,結(jié)合實(shí)例形式詳細(xì)分析了vue封裝全局filter及相關(guān)使用技巧,需要的朋友可以參考下
本文實(shí)例講述了vue實(shí)現(xiàn)的封裝全局filter并統(tǒng)一管理操作。分享給大家供大家參考，具體如下：
在前后端分離的項(xiàng)目中，經(jīng)常會(huì)有后臺(tái)返回的數(shù)據(jù)需要進(jìn)過處理才能顯示到頁面上的場(chǎng)景。
使用最多的場(chǎng)景就是日期和時(shí)間的處理，后臺(tái)一般返回的都是時(shí)間戳，那么我們就要對(duì)時(shí)間戳進(jìn)行處理。
下面就拿封裝全局的處理日期和時(shí)間的 filter 來展示如何 vue 如何封裝全局 filter 并統(tǒng)一處理。
在 src 目錄下新建 filters 目錄用來專門存放全局過濾器，如果項(xiàng)目的過濾器過多，那么就要按類型分類。
我司的項(xiàng)目需要前臺(tái)處理的數(shù)據(jù)不是太多，那么就在 filters 目錄下新建一個(gè) index.js 來存放所有的過濾器就足夠了。
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]));
在頁面中使用：
<p>{{time | normalDate('/')}}</p> //這樣時(shí)間戳就會(huì)轉(zhuǎn)化為xxxx/xx/xx的格式
希望本文所述對(duì)大家vue.js程序設(shè)計(jì)有所幫助。
相關(guān)文章
Vue 3 + Element Plus 封裝單列控制編輯的可編輯表格
在Web應(yīng)用開發(fā)中實(shí)現(xiàn)表格數(shù)據(jù)編輯功能至關(guān)重要,本文將詳細(xì)介紹如何使用Vue3和ElementPlus庫來構(gòu)建一個(gè)支持單列編輯的表格組件,本教程詳細(xì)闡述了組件創(chuàng)建過程和數(shù)據(jù)綁定機(jī)制,幫助你快速掌握Vue3中表格編輯功能的實(shí)現(xiàn),感興趣的朋友一起看看吧2024-09-09
詳解vuex中mapState,mapGetters,mapMutations,mapActions的作用
這篇文章主要介紹了vuex中mapState,mapGetters,mapMutations,mapActions的作用,需要的朋友可以參考下2018-04-04
在Vue3項(xiàng)目中集成CodeMirror創(chuàng)建SQL編輯器的方法詳解
在這篇文章中,我們將學(xué)習(xí)如何在 Vue 3 項(xiàng)目中集成 CodeMirror,以創(chuàng)建一個(gè)支持 SQL 語法高亮和自動(dòng)補(bǔ)全的代碼編輯器,需要的朋友可以參考下2025-04-04
這篇文章主要給大家介紹了關(guān)于vue3?Table分頁保留選中狀態(tài)的相關(guān)資料,vue table組件是一個(gè)非常方便的表格組件,它可以幫助我們實(shí)現(xiàn)分頁和選中功能,需要的朋友可以參考下2023-08-08
如何配置vue.config.js 處理static文件夾下的靜態(tài)文件
這篇文章主要介紹了如何配置vue.config.js 處理static文件夾下的靜態(tài)文件，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-06-06
在移動(dòng)端使用vue-router和keep-alive的方法示例
這篇文章主要介紹了在移動(dòng)端使用vue-router和keep-alive的方法示例，vue-router與keep-alive提供的路由體驗(yàn)與移動(dòng)端是有一定差別的，感興趣的小伙伴們可以參考一下2018-12-12
Vue nextTick延遲回調(diào)獲取更新后DOM機(jī)制詳解
這篇文章主要為大家介紹了Vue nextTick延遲回調(diào)獲取更新后DOM機(jī)制詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-08-08
vue-cli3 配置開發(fā)與測(cè)試環(huán)境詳解
這篇文章主要介紹了vue-cli3 配置開發(fā)與測(cè)試環(huán)境詳解，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-05-05
這篇文章主要介紹了vue組件props屬性監(jiān)聽不到值變化問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
關(guān)于Vite不能使用require問題的解決方法
在vue2中我們通常會(huì)在模板中通過三目運(yùn)算符和require來實(shí)現(xiàn)動(dòng)態(tài)圖片,下面這篇文章主要給大家介紹了關(guān)于Vite不能使用require問題的解決方法,需要的朋友可以參考下2022-10-10