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实战系列,在此也非常感谢大家对小编的支持!