Vue引入日期格式插件moment.js

因為需求需要，接口傳遞過來的日期格式是一個時間戳，因此需要進行格式轉換，老大給了插件地址，讓我自己研究

插件地址：http://momentjs.cn/

因為沒有使用過，所有就開始各種百度，參考各位大佬的總結，大概了解了怎么使用，然后記錄下來當做個筆記，免得以后搞忘了

（1）首先在項目目錄下安裝  npm install moment --save

（2）引入moment

在main.js中引入moment

用法一：

import moment from 'moment'

// 定義一個全局過濾器實現日期格式化
Vue.filter('datefmt', function (input, fmtstring) {
  return moment.unix(input).format(fmtstring)
})

 這樣就可以在我們需要對時間進行格式化的組件中進行使用了，如下：

<div class="news-info-date">
    <span class="news-date-span">{{item.publishdate | datefmt('MM/DD')}}</span>
    <span>{{item.publishdate | datefmt('YYYY')}}</span>
</div>

這里我有兩個span標簽，第一個是將時間戳格式為  月/日（11/24）  這樣的格式，第二個則是格式化為年份值（如2018這樣的）

 

用法二：

但是如果我們項目所需的格式都是統一格式的（例如都顯示為2018-09-06），那么可以在main.js中進行統一格式樣式的設置，如下：

Vue.filter('datefmt', function (input, 'YYYY-MM-DD') {
  return moment.unix(input).format('YYYY-MM-DD')
})

然后在組件中這樣使用即可：

<span>{{item.publishdate | datefmt}}</span>

 

總結：如果日期格式都是統一的，那么可以在main.js中進行統一設置（方法二），但如果日期格式有所不同，最好是在使用的組件中根據需要設置日期格式（方法一）。當然了，插件官網上還有其他的一些使用說明，比如獲取今天是星期幾，幾天是這個月的幾號這樣的格式，根據需要引入格式即可...