Vue---定義全局過濾器---時間格式化

// 1. 導入Vue
import Vue from 'vue'
// 導入格式化時間的模塊
import moment from 'moment'

// 定義全局的時間過濾器
Vue.filter('dateFormat', function (dateStr, formatStr = 'YYYY-MM-DD HH:mm:ss') {
  // 在過濾器的處理函數中，最后，必須 return 一個東西，這樣，才是一個合法的過濾器
  return moment(dateStr).format(formatStr)
})

使用

  <span>發表時間：{{ item.add_time | dateFormat }}</span>

  也可以自定義：{{ item.add_time | dateFormat（'YYYY-MM-DD'） }}

 

## 定義全局的過濾器來格式化時間字符串

 1. 經過分析，整個項目中，許多組件都需要格式化時間，因此，推薦定義為全局的時間過濾器；

 2. 定義全局過濾器的語法：`Vue.filter('dateFormat', function(dataStr){})`

 3. 調用過濾器的語法：`<span>{{ item.add_time | dateFormat }}</span>`

 4. 這個時間過濾器，如何去格式化時間呢？比較方便的方式，是借助與第三方的`moment`插件

 5. 這個全局過濾器，定義到哪個文件中呢？

 6. 在設計時間過濾器的時候，為了提高用戶體驗度（可能有的用戶想要 最全的`年-月-日 時：分：秒`， 有的用戶只想要`YYYY-MM-DD`），此時，我們可以為過濾器提供一個可選的 格式字符串；