vue中根据时间戳判断对应的时间(今天 昨天 前天)

下面是针对“vue中根据时间戳判断对应的时间(今天 昨天 前天)”的完整攻略。

1. 时间戳转换为日期

要想根据时间戳判断对应的时间，我们首先需要将时间戳转换为日期。JavaScript提供了Date()对象用于操作日期和时间。我们可以使用Date()对象和getTime()方法来将时间戳转换成日期对象。

举个例子，如果我们有一个时间戳变量timestamp，可以通过下面的代码将其转换为日期变量date：

let timestamp = 1629849065000; // 时间戳
let date = new Date(timestamp); // 时间戳转日期

2. 将日期格式化为特定格式的字符串

将日期格式化为特定格式的字符串有很多种方法，可以使用原生的JavaScript方法，也可以使用开源库如moment.js。我们在这里介绍一种比较简单的方法，使用Date()对象的getYear()、getMonth()、getDay()、getHours()、getMinutes()和getSeconds()方法来获取年、月、日、时、分和秒数。然后，我们拼接这些信息来生成一个特定格式的字符串。

举个例子，以下代码根据现在的日期生成一个格式为“年-月-日 时：分：秒”的字符串：

let now = new Date();
let year = now.getYear() + 1900;
let month = now.getMonth() < 9 ? "0" + (now.getMonth() + 1) : now.getMonth() + 1;
let day = now.getDate() < 10 ? "0" + now.getDate() : now.getDate();
let hour = now.getHours() < 10 ? "0" + now.getHours() : now.getHours();
let minute = now.getMinutes() < 10 ? "0" + now.getMinutes() : now.getMinutes();
let second = now.getSeconds() < 10 ? "0" + now.getSeconds() : now.getSeconds();
let dateStr = year + "-" + month + "-" + day + " " + hour + ":" + minute + ":" + second;

3. 判断对应的时间

有了日期变量，接下来我们就可以根据时间戳判断对应的时间了。我们假设现在有一个时间戳变量timestamp，以下是判断对应的时间的实现过程：

let timestamp = new Date().getTime(); // 获取当前时间戳
let now = new Date(); // 获取当前日期

// 获取和比较时间差
let diff = now.getTime() - timestamp;
let diffDays = Math.floor(diff / (24 * 60 * 60 * 1000));

// 根据时间差返回合适的时间文本
if (diffDays === 0) {
  // 在同一天
  let hour = timestamp.getHours() < 10 ? "0" + timestamp.getHours() : timestamp.getHours();
  let minute = timestamp.getMinutes() < 10 ? "0" + timestamp.getMinutes() : timestamp.getMinutes();
  let timeStr = hour + ":" + minute;
  return timeStr;
} else if (diffDays === 1) {
  // 昨天
  return "昨天";
} else if (diffDays === 2) {
  // 前天
  return "前天";
} else {
  // 更早时间，直接返回日期
  let year = timestamp.getFullYear();
  let month = timestamp.getMonth() < 9 ? "0" + (timestamp.getMonth() + 1) : timestamp.getMonth() + 1;
  let day = timestamp.getDate() < 10 ? "0" + timestamp.getDate() : timestamp.getDate();
  let dateStr = year + "-" + month + "-" + day;
  return dateStr;
}

4. 示例

示例1

以下是一个用Vue.js封装的时间组件，可以根据时间戳判断对应的时间：

<template>
  <div>
    {{ getTimeString(timestamp) }}
  </div>
</template>

<script>
export default {
  props: {
    timestamp: {
      type: Number,
      required: true
    }
  },
  methods: {
    getTimeString(timestamp) {
      let now = new Date(); // 获取当前日期

      // 获取和比较时间差
      let diff = now.getTime() - timestamp;
      let diffDays = Math.floor(diff / (24 * 60 * 60 * 1000));

      // 根据时间差返回合适的时间文本
      if (diffDays === 0) {
        // 在同一天
        let hour = timestamp.getHours() < 10 ? "0" + timestamp.getHours() : timestamp.getHours();
        let minute = timestamp.getMinutes() < 10 ? "0" + timestamp.getMinutes() : timestamp.getMinutes();
        let timeStr = hour + ":" + minute;
        return timeStr;
      } else if (diffDays === 1) {
        // 昨天
        return "昨天";
      } else if (diffDays === 2) {
        // 前天
        return "前天";
      } else {
        // 更早时间，直接返回日期
        let year = timestamp.getFullYear();
        let month = timestamp.getMonth() < 9 ? "0" + (timestamp.getMonth() + 1) : timestamp.getMonth() + 1;
        let day = timestamp.getDate() < 10 ? "0" + timestamp.getDate() : timestamp.getDate();
        let dateStr = year + "-" + month + "-" + day;
        return dateStr;
      }
    }
  }
};
</script>

示例2

以下是另一个用Vue.js封装的时间组件，在不同场景下可以显示不同的格式：

<template>
  <div>
    {{ getTimeString(timestamp, type) }}
  </div>
</template>

<script>
export default {
  props: {
    timestamp: {
      type: Number,
      required: true
    },
    type: {
      type: String,
      default: "default" // 可选值: default, short, full
    }
  },
  methods: {
    getTimeString(timestamp, type) {
      let now = new Date(); // 获取当前日期

      // 获取和比较时间差
      let diff = now.getTime() - timestamp;
      let diffDays = Math.floor(diff / (24 * 60 * 60 * 1000));

      // 根据时间差返回合适的时间文本
      if (type === "default") {
        // 默认格式，自动判断显示今天、昨天、前天或完整日期
        if (diffDays === 0) {
          // 在同一天
          let hour = timestamp.getHours() < 10 ? "0" + timestamp.getHours() : timestamp.getHours();
          let minute = timestamp.getMinutes() < 10 ? "0" + timestamp.getMinutes() : timestamp.getMinutes();
          let timeStr = hour + ":" + minute;
          return timeStr;
        } else if (diffDays === 1) {
          // 昨天
          return "昨天";
        } else if (diffDays === 2) {
          // 前天
          return "前天";
        } else {
          // 更早时间，直接返回日期
          let year = timestamp.getFullYear();
          let month = timestamp.getMonth() < 9 ? "0" + (timestamp.getMonth() + 1) : timestamp.getMonth() + 1;
          let day = timestamp.getDate() < 10 ? "0" + timestamp.getDate() : timestamp.getDate();
          let dateStr = year + "-" + month + "-" + day;
          return dateStr;
        }
      } else if (type === "short") {
        // 简短格式，只显示日期
        let year = timestamp.getFullYear();
        let month = timestamp.getMonth() < 9 ? "0" + (timestamp.getMonth() + 1) : timestamp.getMonth() + 1;
        let day = timestamp.getDate() < 10 ? "0" + timestamp.getDate() : timestamp.getDate();
        let dateStr = year + "-" + month + "-" + day;
        return dateStr;
      } else if (type === "full") {
        // 完整格式，显示日期和时间
        let year = timestamp.getFullYear();
        let month = timestamp.getMonth() < 9 ? "0" + (timestamp.getMonth() + 1) : timestamp.getMonth() + 1;
        let day = timestamp.getDate() < 10 ? "0" + timestamp.getDate() : timestamp.getDate();
        let hour = timestamp.getHours() < 10 ? "0" + timestamp.getHours() : timestamp.getHours();
        let minute = timestamp.getMinutes() < 10 ? "0" + timestamp.getMinutes() : timestamp.getMinutes();
        let second = timestamp.getSeconds() < 10 ? "0" + timestamp.getSeconds() : timestamp.getSeconds();
        let dateStr = year + "-" + month + "-" + day + " " + hour + ":" + minute + ":" + second;
        return dateStr;
      }
    }
  }
};
</script>