vue格式化時間moment-timezone以及Moment.js官網

1、在項目的主js里面導入和導出

import Vue from "vue";
import VueMoment from "vue-moment";
import moment from "moment-timezone";
import "moment/locale/zh-cn";
import ElementUI from "element-ui";
import Headful from "vue-headful";

Vue.use(VueMoment, {
  moment
});
Vue.use(ElementUI);
Vue.component("head-ful", Headful);

export const DATE_FORMAT = "yyyy-MM-dd";
export const ALL = "all";
export const TIMESTAMP_FORMAT = "YYYY-MM-DD HH:mm:ss";//這是具體到秒
export const TIMESTAMP_DATE_FORMAT = "YYYY-MM-DD";//這是具體到天

也可以在格式化日期時間時直接用

{{ scope.row.fytjdwgl.updatedAt|moment("YYYY-MM-DD HH:mm:ss") }}

2、在頁面中應用

<template>
...... 
<el-table-column label="更新於" width="110">
          <template slot-scope="scope">{{ scope.row.fytjdwgl.updatedAt|moment(TIMESTAMP_FORMAT) }}</template>
        </el-table-column>
.....
</template>

<script> import { TIMESTAMP_FORMAT } from "@/components";

export default {
  data() {
    return {
         TIMESTAMP_FORMAT
       };
   },
   created(){},
   methods:{}
};
</script>

 對於可為空的日期格式化需要先進行v-if判空

<template slot-scope="scope">            
   <span v-if="scope.row.yshtgl.djrq">     {{ scope.row.yshtgl.djrq| moment(TIMESTAMP_DATE_FORMAT) }}
   </span>
</template>

 3、Moment方便很多時間的運算，具體可以點擊下面官網鏈接

let end = moment(new Date()).subtract(1, "seconds").format("HH:mm:ss");//時間減去1秒，然后格式化

 let start1 = moment([2020, 11, 11, 15, 25, 50, 125]).add(1, "seconds").format("YYYY-MM-DD HH:mm:ss.SSS");//2020-11-11 15:25:50.125加一秒成為2020-11-11 15:25:51.125

 let start2 = moment([2020, 11, 10]).add(1, "days").format("YYYY-MM-DD");//2020-11-10加1天變成2020-11-11格式化

等等

4、想了解更多

Vue中使用 moment 格式化時間 請去這里看詳細moment

 詳細moment鏈接2

Moment.js官方文檔http://momentjs.cn/docs/#/parsing/date/