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.js官方文档http://momentjs.cn/docs/#/parsing/date/