Vue时间戳（年/月/日/时:分:秒and 刚刚/一分钟前···）

最新推荐文章于 2025-07-24 23:52:56 发布

原创最新推荐文章于 2025-07-24 23:52:56 发布 · 1.5k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#vue #过滤器 #javascript #安卓 #html

本文介绍如何在Vue中使用自定义过滤器处理时间戳，将10位和13位时间戳转化为易读的年/月/日/时:分:秒格式，并实现"刚刚"、"一分钟前"等相对时间显示。详细展示了过滤器的实现方法及实际应用效果。

<template>里面的内容

  <span class="shijian">
  {{item.create_at | dateFilters}}
  </span>

item.create_at是axios请求到的数据
dateFilters是调用时间过滤器的方法

<script>中的内容

 filters: {
    dateFilters: function(value) {
      var year = 24 * 60 * 60 * 1000 * 365;
      var month = 24 * 60 * 60 * 1000 * 30;
      var day = 24 * 60 * 60 * 1000;
      var hour = 60 * 60 * 1000;
      var minute = 60 * 1000;

      var newDate = new Date().getTime();
      var time = new Date(value).getTime();
      var date = newDate - time;

      var years =
        parseInt(date / year) > 0 ? `${parseInt(date / year)}年前` : "";
      var months =
        parseInt(date / month) > 0 ? `${parseInt(date / month)}月前` : "";
      var days = parseInt(date / day) > 0 ? `${parseInt(date / day)}天前` : "";
      var hours =
        parseInt(date / hour) > 0 ? `${parseInt(date / hour)}小时前` : "";
      var minutes =
        parseInt(date / minute) > 0 ? `${parseInt(date / minute)}分钟前` : "";

      if (years.length != 0) {
        return years;
      } else if (months.length != 0) {
        return months;
      } else if (days.length != 0) {
        return days;
      } else if (hours.length != 0) {
        return hours;
      } else if (minutes.length != 0) {
        return minutes;
      } else {
        return parseInt(date / 1000) > 0 ? `${parseInt(date / 1000)}秒前` : "";
      }
    }
  },

具体效果如图：

以上这个是比较复杂的时间过滤器

简单易懂的在这里！！！

<template>里面的内容跟上面是一样的

   <span class="shijian">
   {{item.time | timeFilter}}
   </span>

item.create_at是axios请求到的数据
timeFilter是调用时间过滤器的方法

<script>中的内容

filters: {
    timeFilter(ms) {
      let data = new Date();
      let now = data.getTime();
      let time = (now - ms) / 1000 / 60;
      let timeStr = "";
      if (time <= 1) {
        timeStr = "刚刚";
      } else if (time <= 2) {
        timeStr = "1分钟前";
      } else if (time <= 3) {
        timeStr = "2分钟前";
      } else if (time <= 4) {
        timeStr = "3分钟前";
      } else if (time <= 5) {
        timeStr = "4分钟前";
      } else if (time <= 6) {
        timeStr = "5分钟前";
      } else {
        let dat = new Date();
        dat.setTime(ms);
        // let y = dat.getFullYear(); //年
        let m = dat.getMonth(); //月
        let d = dat.getDate(); //日
        let h = dat.getHours(); //时
        let mm = dat.getMinutes(); //分
        let s = dat.getSeconds(); //秒
        timeStr = `${m}月${d}日 ${h}:${mm}:${s}`;
      }
      return timeStr;
    }
  },

效果如下图：
在这里插入图片描述

vue时间戳转换（10位数）/（13位）

<template>
  <!-- time为时间戳 -->
  <div>{{time | formatDate}}</div>
  <!-- 结果为 2018-01-23 18:31:35 -->
</template>

  export default {
    data() {
      return {
        time: 1516703495241//13位
      };
    },
    filters: {     
     formatDate: function (value) {//13位时间戳转换
        let date = new Date(value);
        let y = date.getFullYear();
        let MM = date.getMonth() + 1;
        MM = MM < 10 ? ('0' + MM) : MM;
        let d = date.getDate();
        d = d < 10 ? ('0' + d) : d;
        let h = date.getHours();
        h = h < 10 ? ('0' + h) : h;
        let m = date.getMinutes();
        m = m < 10 ? ('0' + m) : m;
        let s = date.getSeconds();
        s = s < 10 ? ('0' + s) : s;
        return y + '-' + MM + '-' + d + ' ' + h + ':' + m + ':' + s;
        //结果为：1970-01-18 20:39:05类型
      }

	formatDate: function(value) {//10位时间戳转换
      let date = new Date(parseInt(value) * 1000);
      let y = date.getFullYear();
      let m = date.getMonth() + 1;
      m = m < 10 ? "0" + m : m;
      let d = date.getDate();
      d = d < 10 ? "0" + d : d;
      let h = date.getHours();
      h = h < 10 ? "0" + h : h;
      let minute = date.getMinutes();
      let second = date.getSeconds();
      minute = minute < 10 ? "0" + minute : minute;
      second = second < 10 ? "0" + second : second;
      return m + "月" + d + "日 " + h + ":" + minute + ":"+second; 
      //结果为 12月27日 11:31:17类型
      }
    }
  }