vue时间戳和时间的相互转换方式

这篇文章将为大家详细讲解有关vue时间戳和时间的相互转换方式，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。

Vue.js 时间戳和时间的相互转换

Vue.js 中提供多种方法用于在时间戳和时间之间进行转换，以满足不同的开发需求。

从时间戳转换为时间

1. 使用 new Date() 构造函数：

const timestamp = 1669862400000;
const date = new Date(timestamp);

2. 使用 Vue.filter 过滤器：

Vue.filter("timestampToDate", function (value) {
  return new Date(value);
});

从时间转换为时间戳

1. 使用 Date.prototype.getTime() 方法：

const date = new Date();
const timestamp = date.getTime();

2. 使用 Vue.filter 过滤器：

Vue.filter("dateToTimestamp", function (value) {
  return value.getTime();
});

格式化时间

Vue.js 提供了 vue-moment 和 momentjs 等库，方便地格式化时间：

1. 使用 vue-moment：

import moment from "vue-moment";
moment("2023-03-08").format("MMMM Do YYYY"); // "March 8th 2023"

2. 使用 momentjs：

import moment from "moment";
moment("2023-03-08").format("MMMM Do YYYY"); // "March 8th 2023"

相对时间

Vue.js 通过 timeago.js 库支持相对时间的显示：

import Timeago from "timeago.js";
Vue.use(Timeago, {
  locale: "en-US" // 语言
});

<p>Last updated: {{ $timeago(date) }}</p>

自定义格式化

如果需要自定义的时间格式化，可以使用 strftime 或 moment.js format() 方法：

1. 使用 strftime：

import strftime from "strftime";
const formattedDate = strftime("%Y-%m-%d %H:%M:%S", new Date());

2. 使用 moment.js format()：

import moment from "moment";
const formattedDate = moment().format("YYYY-MM-DD HH:mm:ss");

其他注意事项

• 确保时间戳单位为毫秒，否则需要乘以 1000 转换。
• 使用 Vue.filter 需在 main.js 中注册过滤器。
• 相对时间需要依赖外部库。
• 自定义格式化可以使用多种库或原生 JavaScript 方法。

以上就是vue时间戳和时间的相互转换方式的详细内容，更多请关注编程学习网其它相关文章！