vue获取时间戳转换为日期格式代码实例

本次我们将详细讲解一下“vue获取时间戳转换为日期格式代码实例”。

一、什么是时间戳

时间戳（Timestamp）是指格林威治时间1970年01月01日00时00分00秒起至现在的总秒数。时间戳常用于计算时间间隔和标记时间等情况。

二、获取时间戳

在 Vue 中，可以使用 JavaScript 自带的 Date.now() 方法获取当前时间戳。代码如下：

let timestamp = Date.now();
console.log(timestamp); // 输出例如：1626708588277

三、转换为日期格式

对于获取到的时间戳，我们需要将它转换为我们熟悉的日期格式，可以使用 JavaScript 自带的 Date 类进行转换。代码如下：

let timestamp = 1626708588277;  // 假设这是获取到的时间戳
let date = new Date(timestamp);
console.log(date);  // 输出例如：Fri Jul 16 2021 01:43:08 GMT+0800 (中国标准时间)

输出的结果可能不够美观，为了更好的显示，我们可以对输出进行格式化。代码如下：

let timestamp = 1626708588277;  // 假设这是获取到的时间戳
let date = new Date(timestamp);
let year = date.getFullYear();  // 获取年份
let month = date.getMonth() + 1;  // 获取月份，需要加 1
let day = date.getDate();  // 获取日期
let hour = date.getHours();  // 获取小时数
let minute = date.getMinutes();  // 获取分钟数
let second = date.getSeconds();  // 获取秒数
let formattedDate = `${year}-${month}-${day} ${hour}:${minute}:${second}`;
console.log(formattedDate);  // 输出例如：2021-7-19 15:5:28

以上代码将时间戳格式化成了 年-月-日 时:分:秒 的形式。

四、代码示例

下面提供两个示例，展示如何在 Vue 中获取时间戳并格式化为日期。

示例1：

<template>
  <div>
    <p>{{ formattedDate }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      timestamp: null,
      formattedDate: '',
    };
  },
  mounted() {
    this.timestamp = Date.now();
    this.formatDate();
  },
  methods: {
    formatDate() {
      let date = new Date(this.timestamp);
      let year = date.getFullYear();  // 获取年份
      let month = date.getMonth() + 1;  // 获取月份，需要加 1
      let day = date.getDate();  // 获取日期
      let hour = date.getHours();  // 获取小时数
      let minute = date.getMinutes();  // 获取分钟数
      let second = date.getSeconds();  // 获取秒数
      this.formattedDate = `${year}-${month}-${day} ${hour}:${minute}:${second}`;
    }
  }
}
</script>

示例2：

<template>
  <div>
    <p>{{ formattedDate }}</p>
    <button @click="getTimestamp">获取时间戳</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      timestamp: null,
      formattedDate: '',
    };
  },
  methods: {
    getTimestamp() {
      this.timestamp = Date.now();
      this.formatDate();
    },
    formatDate() {
      let date = new Date(this.timestamp);
      let year = date.getFullYear();  // 获取年份
      let month = date.getMonth() + 1;  // 获取月份，需要加 1
      let day = date.getDate();  // 获取日期
      let hour = date.getHours();  // 获取小时数
      let minute = date.getMinutes();  // 获取分钟数
      let second = date.getSeconds();  // 获取秒数
      this.formattedDate = `${year}-${month}-${day} ${hour}:${minute}:${second}`;
    }
  }
}
</script>

以上两个示例分别展示了如何在 Vue 中获取时间戳并格式化为日期，并且提供了不同的交互方式。你可以根据自己的需求选择适合自己的方式。