摘要：本文详细介绍了Vue中如何将时间戳转换成人们常见的时间格式，包括年月日时分秒。主要从以下4个方面进行详细阐述：
1、JavaScript中的时间戳是什么？
2、Vue时间戳转换成时间的方法有哪些？
3、Vue中使用moment.js插件进行时间格式化
4、Vue自定义过滤器进行时间格式化
1、 JavaScript中的时间戳是什么？
在JavaScript中，时间戳（Timestamp）是指从1970年1月1日 00:00:00 UTC（协调世界时）起至现在的总毫秒数。通俗的说，时间戳就是表示当前日期时间的数字，是一串长整型数字。
在Vue中，我们通常需要将时间戳转换成易于人类观察的时间格式，比如年月日时分秒。
2、Vue时间戳转换成时间的方法有哪些？
Vue中可以使用JavaScript原生方法对时间戳进行转换，也可以使用一些第三方插件进行时间格式化。
对于Vue原生方法，我们可以使用以下代码：
const date = new Date(parseInt(time) * 1000).toLocaleString().replace(/:\d{1,2}$/,' ');而对于第三方插件，比如moment.js插件，可以通过使用以下代码：
moment(parseInt(time) * 1000).format('YYYY-MM-DD HH:mm:ss')3、Vue中使用moment.js插件进行时间格式化
Moment.js是一个轻量级的JavaScript日期处理库，它可以解析、验证、操作和格式化日期。在Vue中使用Moment.js可以极大地简化时间日期操作的繁琐过程，只需要在Vue项目中安装Moment.js，并在需要使用日期时间格式化的地方引入该插件即可。
在Vue中使用Moment.js插件，需要先安装Moment.js：
npm install moment安装好之后，在需要使用日期时间格式化的.vue文件中引入moment.js：
import moment from 'moment'然后就可以愉快地使用moment.js进行时间格式化了：
moment(parseInt(time) * 1000).format('YYYY-MM-DD HH:mm:ss')4、Vue自定义过滤器进行时间格式化
除了使用Moment.js插件之外，Vue还提供了自定义过滤器的方法，使得我们可以在模板中像使用过滤器一样使用函数。
首先，在Vue中定义一个全局过滤器，可以通过以下代码完成：
Vue.filter('dateformat', function (time) { const date = new Date(parseInt(time) * 1000).toLocaleString().replace(/:\d{1,2}$/,' ');
return date;
})然后，我们就可以在需要使用自定义过滤器的.vue文件中使用自定义过滤器了：
{{ time | dateformat }}这里的‘time’是表示需要格式化的时间戳。
除了全局过滤器之外，Vue还可以定义局部过滤器。在Vue中，如果只需要在一个组件中使用自定义过滤器，则可以通过在组件中定义filters属性，然后将自定义过滤器添加到该属性中实现局部过滤器。
下面是一个使用Vue自定义过滤器的完整示例：
<template> <div>
<p>原始时间戳：{{ timestamp }}</p>
<p>转换后：{{ timestamp | dateformat }}</p>
</div>
</template>
<script>
export default {
data () {
return {
timestamp: '1597224816'
}
},
filters: {
dateformat: function (time) {
const date = new Date(parseInt(time) * 1000).toLocaleString().replace(/:\d{1,2}$/,' ');
return date;
}
}
}
</script>以上代码中，{{ timestamp | dateformat }}将会调用自定义过滤器dateformat，将原始的时间戳转换成易于人类观察的日期时间格式。
总结：
本篇文章详细介绍了如何在Vue中将时间戳转换成易于人类观察的时间格式，从JavaScript原生方法到第三方插件，再到Vue自定义过滤器都给出了详细的介绍和示例。以上方法任选其一都可以完成时间格式化的操作，具体使用时可根据自己的需求选择适合的方法。
本文由捡漏网https://www.jianlow.com整理，帮助您快速了解相关知识，获取最新最全的资讯。
