當vue.filter遇見moment.js會發生什麼事？

今天分享一個自己在工作中遇到的一個很小的需求，後臺返回一個日期，

老闆提出這個需求要求不高，但是經驗不深的我真的是連vue的filter都忘記怎麼使用了！身為程序員必須要學會使用百度，網上一搜找到很多寫時間過濾器的方法並且代碼似乎都很簡單沒有太多可以深究的！但是，每個人都非常清楚公司很少會給你大量的工作時間去學習某一項技術的！尤其是小編目前待的一家小公司，效率是老闆最為關注的一件事！

言歸正傳，總而言之，為了提高效率節省時間，我用了moment.js這個時間過濾器插件！

首先，我先簡單的說明一下我使用的moment.js的背景，插件是在做用vue-cli搭建的基於vue後臺後臺管理系統的項目上使用的，因為在先考慮到項目很多地方都涉及到日期過濾的問題，所以我是在main.js中註冊的全局過濾器，其實在做項目的時候絕大部分的過濾器都是要全局使用的，所以如果你是在項目中應用過濾器，小編是強烈推薦註冊全局過濾器的，這樣會省去很多麻煩！

小編在文章開頭提到這是一個插件，那麼我們首要的事情是什麼呢？首先就是通過 npm install moment下載安裝這個插件，安裝後就可以放心去使用這個插件了，下面是小編在main.js中註冊全局時間日期過濾器的截圖！

<code>// 首頁 npm install moment

// 導入 moment 
import moment from 'moment'

// 年月日
Vue.filter('date', function (value, formatString) {
  formatString = formatString || 'YYYY-MM-DD'
  return moment(value).format(formatString)
})

// 時分秒
Vue.filter('time', function (value, formatString) {
  formatString = formatString || 'HH:mm:ss'
  return moment(value).format(formatString)
})/<code>

看截圖時間過濾器已經準備好了，那麼怎麼使用呢！這個其實就更加的簡單了，跟著小編接著看下面的截圖，下面的截圖是我在在項目中使用這個過濾器的代碼截圖。

<code>// 組件中使用
<el-table-column>  label="成為會員"
  prop="add_time"
  align='center'
  width="200"
  show-overflow-tooltip>
    <template>
      
{{scope.row.add_time | date}}

      
{{ scope.row.add_time | time}}

    /<template>
  /<el-table-column>/<code>

這裡要備註一下，YYYY-MM-DD 就轉化成年月日，HH:mm:ss 轉化成時分秒，特別說明：hh:mm:ss 也是轉成時分秒，但是前者是轉化成24小時制式，後者是轉化成12小時制式。

Eagle心語：

當然，小編認為官方文檔說的很清楚，但是結合到實際項目還是會有各種問題，如果你剛好跟我所處的情況相同都是在，那麼我的這邊分享肯定會幫助你完美的解決問題，如果沒有幫你解決問題，那麼同樣可以私信一起探討問題的解決方法。

最後，附上comment.js的官網地址 http://momentjs.cn/docs/

閱讀更多 前端開發Eagle 的文章

關鍵字: 百度 0verflow 發生