写在前:最近在写一个后台管理系统,使用了Vue全家桶+ant design 前端UI框架,遇到一个日期组件需要使用moment类型对象,遂于网上查找资料,经过各种错假信息的洗礼终于获取到moment的正确使用方法,遂记之。

引入

  1. 全局引入,在main.js引入
import moment from 'moment 
Vue.prototype.$moment = moment ;
  1. 组件引入
var moment = required(‘moment’)

使用

  1. moment对象转换为字符串传递到后端
var d = moment(Date()); // 新建一个moment对象(模拟前端组件选择数据)
var dString = moment(d).format('YYYY-MM-DD') // 将moment对象转换为对应格式的字符串
  1. 接收后端传递的字符串数据,在前端日期组件中展示
var dString = '2020-01-17'; // 新建一个日期字符串(模拟后端返回数据)
var dMoment = moment(dString);// 将日期字符串转化为moment对象,并在UI组件中展示
3.一段时间前,一段时间后
moment().add(1,'hours') //一小时后
moment().add(1,'days') //一天后...以此类推

moment().subtract(1,'hours') //一小时前
moment().subtract(1,'days') //一天前...以此类推

*注:如果是全局引入,应使用this.$moment

多写,多看,多记。

Logo

前往低代码交流专区

更多推荐