Vue的实时时间转换Demo

time.html:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>时间转换指令</title>

</head>

<body>

<div id="app" v-cloak>

    <div v-time="timeNow"></div>

    <div v-time="timeBefore"></div>

</div>

<script src="../js/vue.js"></script>

<script src="./time.js"></script>

<script src="./index.js"></script>

</body>

</html>

index.js

var app = new Vue({

    el:'#app',

    data:{

        timeNow:(new Date()).getTime(),

        timeBefore:1488930695721

    }

});

time.js

var time= {

    //获取当前时间戳

    getUnix: function () {

        var data = new Date();

        return data.getTime();

    },

    //获取今天0点0分0秒的时间戳

    getTodayUnix: function () {

        var data = new Date();

        data.setHours(0);

        data.setMinutes(0);

        data.setSeconds(0);

        data.setMilliseconds(0);

        return data.getTime();

    },

    //获取今年1月1日0点0分0秒的时间戳

    getYearUnix: function () {

        var data = new Date();

        data.setMonth(0);

        data.setDate(1);

        data.setHours(0);

        data.setMinutes(0);

        data.setSeconds(0);

        data.setMilliseconds(0);//毫秒

        return data.getTime();

    },

    //获取标准的年月日

    getLastDate: function (time) {

        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();

        var year = this.getYearUnix();

        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);

        },60000);

    },

    unbind:function(el){

        clearInterval(el._timeout_);

        delete el._timeout_;

    }

})

Vue的实时时间转换Demo的更多相关文章

  1. 用Vue开发一个实时性时间转换功能，看这篇文章就够了

    前言 最近有一个说法,如果你看见某个网站的某个功能,你就大概能猜出背后的业务逻辑是怎么样的,以及你能动手开发一个一毛一样的功能,那么你的前端技能算是进阶中高级水平了.比如咱们今天要聊的这个话题:如何用 ...

  2. vue中插值表达式中时间转换yyyy-MM-dd HH:mm:ss

    vue插值表达式中将时间转换两种方式:一.定义方法 <div id="app">当前实时时间:{{dateFormat(date)}}</div> //时间 ...

  3. vue.js实战——vue 实时时间

    created:实例创建完成后调用,此阶段完成了数据的观测等,但尚未挂载,$el还不可用,需要初始化处理一些数据时会比较有用. mounted:el挂载到实例上后调用,一般我们的第一个业务逻辑会在这里 ...

  4. vue ele 日期时间格式限制不能早于当天，时间转换成时间戳 进行比较

    <el-date-picker             value-format="yyyy-MM-dd HH:mm:ss"             v-model=&quo ...

  5. C#实现多级子目录Zip压缩解压实例 NET4.6下的UTC时间转换 [译]ASP.NET Core Web API 中使用Oracle数据库和Dapper看这篇就够了 asp.Net Core免费开源分布式异常日志收集框架Exceptionless安装配置以及简单使用图文教程 asp.net core异步进行新增操作并且需要判断某些字段是否重复的三种解决方案 .NET Core开发日志

    C#实现多级子目录Zip压缩解压实例 参考 https://blog.csdn.net/lki_suidongdong/article/details/20942977 重点: 实现多级子目录的压缩, ...

  6. UTC 时间转换 All In One

    UTC 时间转换 All In One http://www.timebie.com/cn/stduniversal.php UTC 时间 世界的每个地区都有自己的本地时间,在 Internet 及无 ...

  7. PostgreSQL 时间转换

    背景:最近频繁使用到时间转换相关的操作,特此小记. 1.实时取最近24小时内数据. select now() - interval '24h'; 通过sql获得符合要求的时间段,当做where条件即可 ...

  8. [jquery]将当前时间转换成yyyymmdd格式

    如题: function nowtime(){//将当前时间转换成yyyymmdd格式 var mydate = new Date(); var str = "" + mydate ...

  9. MySQL 日期、时间转换函数

    MySQL 日期.时间转换函数:date_format(date,format), time_format(time,format) 能够把一个日期/时间转换成各种各样的字符串格式.它是 str_to ...

随机推荐

  1. struts2从浅至深（六）总结

    在我认为strust2的作用就是 1.主要跟前端交互的框架数据提交先经过struts 2.起到对数据的过滤,接受数据 3.把数据显示到前段,具有很成熟的ognl技术,用起来特别方便 4.还提供了跟前段 ...

  2. hdu 2153 仙人球的残影

    题目 这道题可以有两种写法: 第一种:找规律,如下: #include <stdio.h> int main() { int n,i,j,res; while (scanf("% ...

  3. KNN和K-Means的区别

    KNN和K-Means的区别 KNN K-Means 1.KNN是分类算法 2.监督学习 3.喂给它的数据集是带label的数据,已经是完全正确的数据 1.K-Means是聚类算法 2.非监督学习 3 ...

  4. 老刘 Yii2 源码学习笔记之 Module 类

    关系类图 从上图可以看出 Application 类继承了 Module,在框架中的是非常重要角色. 加载配置 public function setModules($modules) { forea ...

  5. Spring 配置 事务的几种方式

    Spring配置文件中关于事务配置总是由三个组成部分,DataSource.TransactionManager和代理机制这三部分,无论是那种配置方法,一般变化的只是代理机制这块! 首先我创建了两个类 ...

  6. NOR Flash的学习

    NOR Flash简介    NOR FLASH是INTEL在1988年推出的一款商业性闪存芯片,它需要很长的时间进行抹写,大半生它能够提供完整的寻址与数据总线,并允许随机存取存储器上的任何区域,而且 ...

  7. C++互斥器：Mutex

    互斥器的功能是,使多个线程和谐工作.同一时间内,只能有一个线程得到互斥对象,并获得资源操作权限,那么如果同一时间其他线程也想去操作资源,此时就会因为Mutex未处于激发状态,而无奈的等待…这时候,线程 ...

  8. Android-JVM中的多线程&垃圾回收

    Java语言是为数不多支持多线程技术的编程语言,而这多线程就不得不提到JVM虚拟机 先看代码案例:(JVM收垃圾) package android.java.thread; class Demo { ...

  9. Git小技巧：VIM中如何填写注释信息

    使用Git命令行工具的时候,经常一不小心就进入VIM界面,例如git commit没有填写任何描述信息.对于习惯了Windows可视化操作界面的用户,可能一下子会觉得无所适从,只能在键盘上一顿短按.下 ...

  10. 浏览器拦截跨域请求处理方法（同源策略不允许读取XXX上的远程资源）

    直接了当了说,解决此类问题,最直接的方法就是,就是给被请求的服务器,添加HTTP头响应头,这里提供两种添加HTTP头的方法: 第一种,就是在程序中添加HTTP头: Response.AddHeader ...