Moment是一个非常实用的轻量级的时间库，它可以快速的对时间进行解析、检验、获取、设置、格式话及比较等操作。它方便了开发者在日常开发中对时间的操作，大大提高了开发效率。

 

安装moment

在Vue中使用moment还是很简单的，可以使用安装命令：npm install moment --save直接安装moment。当然也可以直接下载moment.js文件然后在项目中引入。

 

​引入moment

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

 

moment使用

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

 

设置时间过滤器

我们也可以定义全局的时间过滤器，通过Vue.filter()来注册一个自定义过滤器（该过滤器必须放在Vue实例化之前），过滤器函数第一个参数为过滤器名称，第二个参数是个执行指定过滤要求的方法。为了方便用户这里在定义方法的时候默认了一个pattern，用户如果没有填写指定的输出格式时就输出默认的格式。

 

使用过滤器

过滤器只能在{{}}和：v-bind中使用，定义时第一个参数固定为预处理的时间，第二个参数为我们定义的过滤器名称（也可以附上参数），中间用“|”分割即可。

 

moment的获取方法

moment提供了很多获取时间的方法，可以精准定位到你需要的时间周期或者时间点。下面列出了一些moment常用到的获取方法，你可以根据自己的需求选用适合的方法。这里我用的是Vue框架所以使用了prototype属性向Vue实例对象中添加属性或方法，在使用的时候请用this.$moment.方法来实现对应的功能。

 

moment的设置方法

moment不仅可以获取时间，同时也可以设置指定的时间。大部分都是在获取的方法上添加参数即可实现相应的设置功能，时间加减指的是在当前获取到的时间的基础上进行增加的功能，比如要更改时差！

 

moment格式化时间

moment支持对时间进行格式化，通过format()方法可以实现对当前时间进行格式化显示。下面是参数中对应的格式代码，分别对应着不同的含义。如this.$moment().format('MM DD YYYY, hh:mm:ss')表示输出格式为“月/日/年 小时：分钟：秒”。

 

总结：

以上内容是小编给大家分享的Vue实战069：使用moment格式化时间，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。更多Vue实战技巧可以参考专栏：Vue实战系列，在此也非常感谢大家对小编的支持！