本文共 2483 字，大约阅读时间需要 8 分钟。

自定义指令 v-time

将绝对时间转换为相对时间。（例如，社交软件发布动态里面的时间、几分钟前、几小时前…）

入口页面 index.html

    
       
       
           
   
        
    
        
    
        
    
                 {
  {timeBefore}}        
    
    
   
            

根实例 index.js

var app = new Vue({
       el: '#app',    data: {
           timeNow: (new Date()).getTime(),        timeBefore: 1571324903814    }});

自定义指令 time.js

var Time = {
       //获取当前时间戳    getUnix: function () {
           var date = new Date();        return date.getTime();    },    //获取今天0点0分0秒的时间戳    getTodayUnix: function () {
           var date = new Date();        date.setHours(0);        date.setMinutes(0);        date.setSeconds(0);        date.setMilliseconds(0);        return date.getTime();    },    //获取今年1月1日0点0分0秒的时间戳    getYearUnix: function () {
           var date = new Date();        date.setMonth(0);        date.setDate(1);        date.setHours(0);        date.setMinutes(0);        date.setSeconds(0);        date.setMilliseconds(0);        return date.getTime();    },    //获取标准年月日    getLastDate: function () {
           var date = new Date(time);        var month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1;        var day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate();        return date.getFullYear() + '-' + month + '-' + day;    },    //转换时间    getFormatTime: function (timestamp) {
           var now = this.getUnix();//当前时间戳        var today = this.getTodayUnix();//今天0点时间戳        var year = this.getYearUnix();//今年0点时间戳        var timer = (now - timestamp) / 1000;//转换为妙级别时间戳        var tip = '';        if(timer <= 0){
               tip ='刚刚';        }else if(Math.floor(timer / 60) <= 0){
               tip = '刚刚';        }else if(timer < 3600){
               tip = Math.floor(timer / 60) + '分钟前';        }else if(timer >= 3600 && (timestamp - today >= 0)){
               tip = Math.floor(timer / 3600) + '小时前';        }else if(timer / 86400 <= 31){
               tip = Math.ceil(timer / 86400) + '天前';        }else{
               tip = this.getLastDate(timestamp);        }        return tip;    }};Vue.directive('time', {
       bind: function (el, binding) {
           el.innerHTML = Time.getFormatTime(binding.value);        el.__timeout__ = setInterval(function () {
               el.innerHtML = Time.getFormatTime(binding.value);        }, 1000);    },    unbind: function (el) {
           clearInterval(el.__timeout__);        delete el.__timeout__;    } });

转载地址：http://rxsqb.baihongyu.com/