vue实战:时间格式化插件moment

Moment.js是一个轻量级的JavaScript时间库,它方便了日常开发中对时间的操作,提高了开发效率。

日常开发中,通常会对时间进行下面这几个操作:比如获取时间,设置时间,格式化时间,比较时间等等。

官方网址:Moment.js官网

一、安装moment

可以使用安装命令:npm install moment --save直接安装moment
当然也可以直接下载moment.js文件然后在项目中引入。

npm install moment --save
// 或者 yarn 命令
yarn add moment

二、直接在main.js文件中引入

main.js文件中导入moment,然后通过prototype属性向Vue实例对象中添加属性或方法。

import moment from 'moment'
Vue.prototype.$moment = moment;

三、在组件中测试效果

在Vue组件中使用moment可以使用this.继承,通过this.$moment()就可以获取当前时间。如果你需要格式化获取到的时间格式,可以通过.format("YYYY-MM-DD")方法来实现,里面的字符串为年月日的时间显示格式。

例如:

<template>
   <div>{{ time }}</div>
</template>

<script>
export default {
  data() {
    return {
      time: this.$moment().format("YYYY-MM-DD hh:mm:ss"), // 获取当前时间
    };
  },
};
</script>

扩展:

其他的一些格式:

this.$moment().format('YYYY-MM-DD HH:mm:ss') //"2021-07-09 16:30:40"
this.$moment().format('YYYY年MM月DD日 HH时mm分ss秒') //"2021年07月09日 16时30分45秒"
this.$moment().format('YYYY年MM月DD日 HH:mm:ss') // "2021年07月09日 16:31:18"
this.$moment().format('YYYY.MM.DD HH:mm:ss') //"2021.07.09 16:31:58"

多语言格式化(根据所选语言显示不同效果)

//设置语言
var locale = window.navigator.userLanguage || window.navigator.language;//"zh-CN"
moment.locale()//"en"
moment.locale('zh-cn');//"zh-cn"
moment.locale()//"zh-cn"
 
 
//中文
moment().format('L');    // 2021-07-09
moment().format('l');    // 2021-07-09
moment().format('LL');   // 2021年07月09日
moment().format('ll');   // 2021年07月09日
moment().format('LLL');  // 2021年07月09日下午4点32分
moment().format('lll');  // 2021年07月09日下午4点32分
moment().format('LLLL'); // 2021年07月09日星期五下午4点32分
moment().format('llll'); // 2021年07月09日星期五下午4点32分
 
//韩文
moment().format('L');    // 2021.07.09
moment().format('l');    // 2021.7.09
moment().format('LL');   // 2021년 7월 9일
moment().format('ll');   // 2021년 7월 9일
moment().format('LLL');  // 2021년 7월 9일 오후 4시 32분
moment().format('lll');  // 2021년 7월 9일 오후 4시 32분
moment().format('LLLL'); // 2021년 7월 9일 토요일 오후 4시 32분
moment().format('llll'); // 2021년 7월 9일 토 오후 4시 32분

使用moment.js获取/设置时间信息

moment().second() //获得 秒
moment().second(Number) //设置 秒。0 到 59
moment().minute() //获得 分
moment().minute(Number) //设置 分。0 到 59
// 类似的用法
moment().hour() // 小时
moment().date() // 一个月里的第几天
moment().day() // 星期几
moment().dayOfYear() // 一年里的第几天
moment().week() // 一年里的第几周
moment().month() // 第几个月
moment().quarter() // 一年里的第几个季度
moment().year() // 年
moment().daysInMonth() // 当前月有多少天

使用moment.js操作时间

moment().add(7, 'days') // 之后的第7天。第2个参数还可以是 'months', 'years' 等。注意是复数。
moment().add(7, 'd')// 与上面一行代码的运行结果一样。
moment().subtract(1, 'months') // 上个月
 
moment().startOf('week') // 这周的第一天
moment().startOf('hour') // 等效与 moment().minutes(0).seconds(0).milliseconds(0)。
// 还支持 'year''month' 等
moment().endOf('week')

版权声明:本文为weixin_49519738原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。