在实际运用中时间格式“yyyy-MM-dd hh:mm:ss”用的最多,如果需要其他格式可根据需求自行修改,下面直接上代码:

引入相应的js即可运行

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>vue实时显示当前时间显示</title>

    <link rel="stylesheet" href="../css/reset.css">

    <script src="../js/jquery/jquery-3.1.1.min.js"></script>

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

</head>

<body >

<div id="app">当前实时时间:{{dateFormat(date)}}</div>

<script>

    var vm=new Vue({

        el:"#app",

        data:{

            date:new Date()

        },

        mounted () {

            var _this = this; //声明一个变量指向vue实例this,保证作用域一致

            this.timer = setInterval(function() {

                _this.date = new Date();//修改数据date

            }, 1000);

        },

        beforeDestroy () {

            if(this.timer) {

                clearInterval(this.timer);//在vue实例销毁钱，清除我们的定时器

            }

        },

        methods:{

            //时间格式化函数，此处仅针对yyyy-MM-dd hh:mm:ss 的格式进行格式化

            dateFormat(time) {

                var date=new Date(time);

                var year=date.getFullYear();

                /* 在日期格式中，月份是从0开始的，因此要加0

                 * 使用三元表达式在小于10的前面加0，以达到格式统一  如 09:11:05

                 * */

                var month= date.getMonth()+1<10 ? "0"+(date.getMonth()+1) : date.getMonth()+1;

                var day=date.getDate()<10 ? "0"+date.getDate() : date.getDate();

                var hours=date.getHours()<10 ? "0"+date.getHours() : date.getHours();

                var minutes=date.getMinutes()<10 ? "0"+date.getMinutes() : date.getMinutes();

                var seconds=date.getSeconds()<10 ? "0"+date.getSeconds() : date.getSeconds();

                // 拼接

                return year+"-"+month+"-"+day+" "+hours+":"+minutes+":"+seconds;

            }

        }

    })

</script>

</body>

</html>

效果如下:

vue实时显示当前时间且转化为“yyyy-MM-dd hh:mm:ss”格式的更多相关文章

  1. Javascript 客户端实时显示服务器时间

    <!doctype html> <html lang="zh-cn"> <head> <meta charset="utf-8& ...

  2. Vue页面上实时显示当前时间，每秒更新

    有时候我们需要在页面上添加一个类似时钟的东西来实时显示当前时间,这个时候我们可以利用定时器来完成这个功能 <div id="app"> {{date}} </di ...

  3. JavaScript实时显示当前时间的例子

    用javascript代码在当前页面中实时显示当前时间.代码如下: <html> <head> <title>JavaScript 实时显示当前时间-www.jbx ...

  4. Qt 实时显示系统时间

    前言 我们用一个label控件来实时显示系统时间,用到 QTimer 和 QDateTime 这个两个类. 正题 头文件: #ifndef MAINWINDOW_H #define MAINWINDO ...

  5. js 时间转字符串，转成yyyy-MM-dd HH:mm:SS格式

    // 时间转字符串,转成yyyy-MM-dd HH:mm:SS格式 function dateToStr(datetime){ var dateTime = new Date(datetime); v ...

  6. Android学习总结——实时显示系统时间

    我们都知道System.currentTimeMillis()可以获取系统当前的时间,这里要实时显示就可以开启一个线程,然后通过handler发消息,来实时的更新TextView上显示的系统时间.具体 ...

  7. JavaScript实时显示当前时间

    1.HTML部分 <div id="div1">显示当前时间!</div> 2.css部分 #div1 { width: 700px; height: 50 ...

  8. Hive日期、时间转换：YYYY-MM-DD与YYYYMMDD；hh.mm.ss与hhmmss的相互转换

    思路 YYYY-MM-DD与YYYYMMDD:hh-mm-ss与hhmmss的相互转换有两种办法,第一种是利用UNIX时间戳函数,第二种是利用字符串拼接函数. YYYY-MM-DD与YYYYMMDD相 ...

  9. vue 2.1.3 实时显示当前时间，每秒更新

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

随机推荐

  1. 企业CICD规模化落地浅析

    本次分享的题目是<企业CICD规模化落地>,因此我们不会侧重讲解CICD是什么以及怎样做CICD,而是你已经知道怎样"玩转"CICD了,要如何在一个比较大的企业中规模化 ...

  2. python 小兵(10)内置函数

    内置函数(下午讲解) 什么是内置函数?就是python帮我们提供的一个工具,拿过直接用就行,比如我们的print,input,type,id等等.截止到python3.6.2版本 中一共提供了68个内 ...

  3. 解决Vue3使用 Ant Design，出现多个Modal，全是黑屏，导致列表页看不见问题！

    尴尬问题 不报错,但是我看着就难受. 求知路上 请教了下强哥,强哥告诉我可能某个样式属性失效引起(无效),建议我F12看下样式. 接着,我F12狂看元素样式,查了一个小时未果,我真抓狂了. 都想明天问 ...

  4. JAVA类加载器二 通过类加载器读取资源文件

    感谢原文作者:不将就! 原文链接:https://www.cnblogs.com/byron0918/p/5770684.html 一.getResourceAsStream方法 getResourc ...

  5. 通过bindservice方式调用服务方法里面的过程

    为什么要引入bindService:目的为了调用服务里面的方法 (1)定义一个服务 服务里面有一个方法需要Activity调用 (2)定义一个中间人对象(IBinder) 继承Binder (3)在o ...

  6. C#中的字符串拼接@，$

    转载自:https://blog.csdn.net/qq_40666620/article/details/101695138 一:@ @的意思是以@标注的字符出,其中所有的符号均为字符串符号,没有什 ...

  7. MySQL数据库授权与索引

    MySQL数据库授权与索引 目录 MySQL数据库授权与索引 一.数据库用户授权 1. 授予权限 2. 查看权限 3. 删除权限 4. 全部权限(all privileges) 二.MySQL索引 1 ...

  8. latex知识点

    sensors期刊下载的laTex模板错误修改 把上面的那个删了,原因是什么那,请看下文...... 如何使用endnote + latex 1.使用word将文献按照word引用顺序导出成一个新的e ...

  9. 【CF632F】Magic Matrix(生成树 脑洞)

    题目链接 大意 给定一个\(N\times N\)的矩阵,问是否满足以下三个条件: \(A_{i,i}=0\) \(A_{i,j}=A_{j,i}\) 对于任意的\(i,j,k\),满足\(A_{i, ...

  10. 如何快速为团队打造自己的组件库（下）—— 基于 element-ui 为团队打造自己的组件库

    文章已收录到 github,欢迎 Watch 和 Star. 简介 在了解 Element 源码架构 的基础上,接下来我们基于 element-ui 为团队打造自己的组件库. 主题配置 基础组件库在 ...