moment.js+過濾器filter在Vue CLI中做日期處理

官網：Moment.js 中文網 (momentjs.cn)

在控制台輸入moment()可以檢視相關屬性。

安裝：

cnpm i moment -S
           

 安裝後啟動項目：

npm run dev
           

 main.js中導入并建立全局過濾器：

// 導入moment
import Moment from 'moment';

// 自定義moment全局過濾器
Vue.filter('convertTime', function(timeStr, formatStr) {
  return Moment(timeStr).format(formatStr);
});
           

ChaoShiDetail.vue中convertTime過濾器的調用：

<template>
  <div class="detail">
    <Navbar :title="title" />
    {{ 1236 }}
    發表時間：{{ time | convertTime('YYYY-MM-DD')}}
  </div>
</template>

<script>
  export default {
    name: 'ChaoShiDetail',
    data() {
      return {
        title: '詳情介紹',
        // details: {}
        time: '2021-09-27T15:40:50+08:00'
      }
    },
    // create(){
    //   let id = this.$route.query.id;
    //   this.$axios.get(`/getDetails/${id}`)  // 模闆字元串拼接變量
    //   .then((res) => {
    //     this.details = res.data.message[0];
    //   })
    //   .catch((err) => {
    //     console.log('詳情資料異常', err);
    //   })
    // }
  }
</script>

<style>
  .detail {
    margin-top: 10px;
    padding: 0 15px;
  }
</style>
           

頁面：