时间戳及过滤器的使用

最新推荐文章于 2022-05-05 15:32:45 发布

weixin_39393337

最新推荐文章于 2022-05-05 15:32:45 发布

阅读量667

点赞数

分类专栏： vue 记录文章标签： vue 时间戳过滤器

本文链接：https://blog.csdn.net/weixin_39393337/article/details/86359249

版权

记录同时被 2 个专栏收录

15 篇文章 0 订阅

订阅专栏

vue

2 篇文章 0 订阅

订阅专栏

需求如下：（后台不给时间戳，给的时间格式是：'2019-01-12 11:01:00'；）

<template>
  <div class="home-index">
    <!--时间戳测试用-->
    <p style="font-size: 25px;color:red;">发布时的时间戳：{{postTime}}</p>
    <p style="font-size: 25px;color:green;">当前时间戳：{{nowTime}}</p>
    <p style="font-size: 25px;color:black;">根据需求的显示：{{chazhi | hopeTime}}</p>
  </div>
</template>

<script>

export default {
  data() {
    return {
      postTime:"",
      nowTime:'',
      chazhi:"",
    };
  },
  created() {
    this.initData();
    this.postTime=(new Date('2019-01-12 11:01:00')).getTime(new Date('2019-01-12 11:01:00'));
    this.nowTime=Date.parse(new Date());
    this.chazhi=(parseInt(this.nowTime,10)-parseInt(this.postTime,10))/1000;
  },
  filters:{
    hopeTime(val){
      if(val<60){
        val="刚刚";
      }else if(val>60 && val<60*60){
        val=parseInt(val/60,10)+"分钟前发布";
      }else if(val>=60*60 && val<60*60*24){
        val=parseInt(val/(60*60),10)+"小时前发布";
      }else if(val>=60*60*24 && val<=60*60*24*3){
        val=parseInt(val/(60*60*24),10)+"天前发布";
      }else{
        val='2019-01-01 00:00:00';
      }
      return val;
    },
  }
};
</script>