Vue时间转换为时间戳方法详解

1. 介绍

在Vue中，我们经常会遇到将时间转换为时间戳的需求，比如将用户输入的时间转换为时间戳进行数据的存储和处理。本文将详细介绍如何在Vue中实现时间和时间戳的相互转换。

2. 时间转换为时间戳

2.1 new Date() 方法

在Vue中，可以使用JavaScript内置的new Date()方法来实现时间转换为时间戳的功能。该方法创建一个表示当前时间的Date对象。

var time = new Date(); // 获取当前时间
var timestamp = time.getTime(); // 将时间转换为时间戳

以上代码将当前的时间转换为时间戳。其中，getTime()方法返回自 1970 年 1 月 1 日 00:00:00 UTC 到当前时间的毫秒数。

2.2 使用moment.js 插件

Moment.js是一个轻量级的JavaScript日期处理库，可以方便地对日期和时间进行格式化、解析、验证和操作。在Vue中，可以使用Moment.js插件来实现时间和时间戳的转换。

2.2.1 安装moment.js插件

首先，我们需要将Moment.js插件添加到Vue项目中。可以使用npm或者yarn来安装Moment.js插件。

npm install moment --save

或者

yarn add moment

2.2.2 使用moment.js插件进行转换

安装完成后，在Vue组件中通过import引入Moment.js。

import moment from 'moment';

将时间转换为时间戳的方式如下：

var time = '2022-01-01'; // 设置时间
var timestamp = moment(time).format('X'); // 使用Moment.js将时间转换为时间戳

通过moment()方法传入时间，然后使用format('X')将时间转换为时间戳。其中，X表示时间戳的格式，大写的X表示获取的是秒级时间戳，小写的x表示获取的是毫秒级时间戳。

3. 时间戳转换为时间

3.1 使用moment.js 插件

同样地，在Vue中可以使用Moment.js插件来将时间戳转换为时间。

3.1.1 将时间戳转换为指定格式的时间

将时间戳转换为指定格式的时间的方式如下：

var timestamp = 1640995200; // 设置时间戳
var time = moment(timestamp * 1000).format('YYYY-MM-DD'); // 使用Moment.js将时间戳转换为时间

通过moment()方法传入时间戳乘以1000，然后使用format('YYYY-MM-DD')将时间戳转换为指定格式的时间。其中，YYYY表示年份，MM表示月份，DD表示日期。

3.1.2 将时间戳转换为当前时间

将时间戳转换为当前时间的方式如下：

var timestamp = 1640995200; // 设置时间戳
var time = moment(timestamp * 1000).format('YYYY-MM-DD HH:mm:ss'); // 使用Moment.js将时间戳转换为当前时间

通过moment()方法传入时间戳乘以1000，然后使用format('YYYY-MM-DD HH:mm:ss')将时间戳转换为当前时间。其中，HH表示小时，mm表示分钟，ss表示秒。

4. 示例代码运行结果

4.1 new Date() 方法

var time = new Date(); // 获取当前时间
var timestamp = time.getTime(); // 将时间转换为时间戳
console.log(timestamp); // 输出当前时间的时间戳

运行结果：

1663576631112

4.2 使用moment.js 插件

import moment from 'moment';

var time = '2022-01-01'; // 设置时间
var timestamp = moment(time).format('X'); // 使用Moment.js将时间转换为时间戳
console.log(timestamp); // 输出时间戳

运行结果：

1640995200

import moment from 'moment';

var timestamp = 1640995200; // 设置时间戳
var time = moment(timestamp * 1000).format('YYYY-MM-DD'); // 使用Moment.js将时间戳转换为时间
console.log(time); // 输出时间

运行结果：

2022-01-01

import moment from 'moment';

var timestamp = 1640995200; // 设置时间戳
var time = moment(timestamp * 1000).format('YYYY-MM-DD HH:mm:ss'); // 使用Moment.js将时间戳转换为当前时间
console.log(time); // 输出当前时间

运行结果：