前端Vue中JavaScript的 Moment.js 日期处理类库 使用

官网地址:
官网

格式

vue项目首先在终端下载依赖

npm install moment --save

然后在需要的页面直接引入js中

import moment from 'moment';

案例
然后调用接口使用,接口返回如下图

使用:

				    

                        {{ new moment(item.createTime).format('MM.DD') }}
                        {{ new moment(item.createTime).format('HH:mm') }}
                    

展示效果如下图

其他语法看官网:
地址:http://momentjs.cn/

日期格式化

moment().format('MMMM Do YYYY, h:mm:ss a'); // 二月 10日 2022, 2:40:19 下午
moment().format('dddd');                    // 星期四
moment().format("MMM Do YY");               // 2月 10日 22
moment().format('YYYY [escaped] YYYY');     // 2022 escaped 2022
moment().format();                          // 2022-02-10T14:40:19+08:00

相对时间

moment("20111031", "YYYYMMDD").fromNow(); // 10 年前
moment("20120620", "YYYYMMDD").fromNow(); // 10 年前
moment().startOf('day').fromNow();        // 15 小时前
moment().endOf('day').fromNow();          // 9 小时内
moment().startOf('hour').fromNow();       // 40 分钟前

日历时间

moment().subtract(10, 'days').calendar(); // 2022/01/31
moment().subtract(6, 'days').calendar();  // 上星期五14:40
moment().subtract(3, 'days').calendar();  // 上星期一14:40
moment().subtract(1, 'days').calendar();  // 昨天14:40
moment().calendar();                      // 今天14:40
moment().add(1, 'days').calendar();       // 明天14:40
moment().add(3, 'days').calendar();       // 下星期日14:40
moment().add(10, 'days').calendar();      // 2022/02/20

多语言支持

moment.locale();         // zh-cn
moment().format('LT');   // 14:40
moment().format('LTS');  // 14:40:19
moment().format('L');    // 2022/02/10
moment().format('l');    // 2022/2/10
moment().format('LL');   // 2022年2月10日
moment().format('ll');   // 2022年2月10日
moment().format('LLL');  // 2022年2月10日下午2点40分
moment().format('lll');  // 2022年2月10日 14:40
moment().format('LLLL'); // 2022年2月10日星期四下午2点40分
moment().format('llll'); // 2022年2月10日星期四 14:40

html中使用

<template>
    <div>
        {{moment(data).format('YYYY-MM-DD:HH:MM:SS')}}
        
        {{ new moment(data).format('YYYY-MM-DD:HH:MM:SS')}}
    div>
template>

<script>
import moment from 'moment';
export default {
    data () {
        return {
            moment,
            data: new Date()
        }
    },
    methods: {
    }
}
script>

js中使用

<template>
  <div>{{ time | dateFormat }}div>
template>

<script>
import moment from "moment";
export default {
  data() {
    return {
      obj: {
        time: new Date(""),
      },
    };
  },
  filters: {
    // 格式化日期
    dateFormat(value) {
      return moment(value).format("YYYY-MM-DD HH:mm:ss");
    },
  },
  methods: {},
};
script>

推荐

推荐1
推荐2
推荐3

最后

感觉文章好的话记得点个心心和关注和收藏，有错的地方麻烦指正一下，如果需要转载,请标明出处，多谢！！！