溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

vue實(shí)現(xiàn)的封裝全局filter并統(tǒng)一管理操作示例

發(fā)布時(shí)間：2020-09-11 20:45:32 來(lái)源：腳本之家 閱讀：135 作者：不想寫(xiě)代碼的碼農(nóng) 欄目：web開(kāi)發(fā)

本文實(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)專門(mén)存放全局過(guò)濾器，如果項(xiàng)目的過(guò)濾器過(guò)多，那么就要按類型分類。

我司的項(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ì)有所幫助。

向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手