Vue引入日期格式插件moment.js

因为需求需要，接口传递过来的日期格式是一个时间戳，因此需要进行格式转换，老大给了插件地址，让我自己研究

插件地址：http://momentjs.cn/

因为没有使用过，所有就开始各种百度，参考各位大佬的总结，大概了解了怎么使用，然后记录下来当做个笔记，免得以后搞忘了

（1）首先在项目目录下安装  npm install moment --save

（2）引入moment

在main.js中引入moment

用法一：

import moment from 'moment'

// 定义一个全局过滤器实现日期格式化
Vue.filter('datefmt', function (input, fmtstring) {
  return moment.unix(input).format(fmtstring)
})

 这样就可以在我们需要对时间进行格式化的组件中进行使用了，如下：

<div class="news-info-date">
    <span class="news-date-span">{{item.publishdate | datefmt('MM/DD')}}</span>
    <span>{{item.publishdate | datefmt('YYYY')}}</span>
</div>

这里我有两个span标签，第一个是将时间戳格式为  月/日（11/24）  这样的格式，第二个则是格式化为年份值（如2018这样的）

 

用法二：

但是如果我们项目所需的格式都是统一格式的（例如都显示为2018-09-06），那么可以在main.js中进行统一格式样式的设置，如下：

Vue.filter('datefmt', function (input, 'YYYY-MM-DD') {
  return moment.unix(input).format('YYYY-MM-DD')
})

然后在组件中这样使用即可：

<span>{{item.publishdate | datefmt}}</span>

 

总结：如果日期格式都是统一的，那么可以在main.js中进行统一设置（方法二），但如果日期格式有所不同，最好是在使用的组件中根据需要设置日期格式（方法一）。当然了，插件官网上还有其他的一些使用说明，比如获取今天是星期几，几天是这个月的几号这样的格式，根据需要引入格式即可...

 

转载于:https://www.cnblogs.com/secretAngel/p/10045721.html