vue2 過濾器 | 過濾時間 Monent.js的使用

本文主要是寫給新手的,我本身也是一個新手。大牛請忽略~若是有錯誤請指出
最近在寫Vue的項目中遇到了時間轉換的問題,因此就開始找資料。
發現可使用Vue的過濾器(filter)來處理
處理時間的業界牛逼類庫 moment.js
下面來講一下用法
第一步:安裝vue

npm install moment --save

第二步:在main.js中引用npm

import moment from 'moment/moment'

第三步:在main.js中添加過濾器api

Vue.filter('moment', function (value, formatString) {
    formatString = formatString || 'YYYY-MM-DD HH:mm:ss';
    // return moment(value).format(formatString); 
    return moment.unix(value).format(formatString); // 這是時間戳轉時間
});

/* eslint-disable no-new */
new Vue({
  el: '#app',
  template: '<App/>',
  components: { App }
})

第四步: 在vue頁面中使用過濾器app

<template>
  <div id="app">
      <div>
        {{ datetime | moment }}
      </div>
  </div>
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
      datetime: '1500799859'
    }
  }
}
</script>

第五步: 結果eslint

2017-07-23 16:50:59
相關文章
相關標籤/搜索