vue中使用moment.js
关于时间,一般存储的都是时间戳,但是想要展示给用户看的又有可能是各式各样的日期格式,那么该如何优雅的转换呢?
时间格式化
1. js转换
function dataFormat(now){
let date = new Date(now)
Year = date.getFullYear() + '-';
Month = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-';
Day = date.getDate() + ' ';
hours = date.getHours() + ':';
minutes = date.getMinutes() + ':';
seconds = date.getSeconds();
return Year+Month+Day+hours+minutes+seconds
}
let now = Date.now();
dataFormat(now)
优点:
- 不用引入其它插件,体积小
缺点:
- 格式需要手动修改
- 不优雅
2. moment.js
2.1 安装插件
npm i -S moment
or
yarn add -S moment
2.2 全局过滤器定义
main.js
import moment from "moment";
// 全局过滤器的定义
Vue.filter("global_filter", function(value, type = "YYYY-MM-DD hh:mm:ss") {
return moment(value).format(type);
});
2.3 组件使用
<div>
全局过滤器:转换成日期格式
<p>{{date | global_filter}}</p>
<p>{{date | global_filter('YYYY/MM/DD')}}</p>
</div>
展示效果: