在实际运用中时间格式“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. 如何加载本地下载下来的BERT模型，pytorch踩坑！！

    近期做实验频繁用到BERT,所以想着下载下来使用,结果各种问题,网上一搜也是简单一句:xxx.from_pretrained("改为自己的路径") 我只想说,大坑!!! 废话不多说 ...

  2. Android Compose的Window Insets

    Android Compose的Window Insets 除了app的内容区域外, 还有一些其他的固定元素会显示在手机屏幕上, 顶部的状态栏, 刘海, 底部的导航栏, 还有输入法键盘, 它们都是系统 ...

  3. FreeSWITCH 1.10.7 编译（debian 11）

    1.安装预备库 apt install -y build-essential gdb gnupg2 wget autoconf lsb-release libtool libtool-bin libt ...

  4. 计算机电子书 2020 CDNDrive 备份（预览版）

    下载方式 pip install CDNDrive # 或 # pip install git+https://github.com/apachecn/CDNDrive cdrive download ...

  5. Rock Pi开发笔记（一）：Rock Pi系列arm产品方案快速落地方案介绍

    前言   开发RK3399等相关的项目和产品做评估,最近发现Rock Pi4是一个很好的评估版,价格合适,能满足评估的开发,像树莓派一样留出来引脚接口,是很好的快速落地arm系列产品和项目的较好方案选 ...

  6. AGC004 部分简要题解

    E 首先问题可以转化为:每次将出口带着边界走,出了边界的机器人立马消失,最大化出口碰到的机器人数量. 考虑哪些机器人是已经出界了的,不难有观察: 当前出界的机器人只与当前出口往四个方向走过的最远距离有 ...

  7. 男孩和女孩(二)-->相识

    转载请注明来源:https://www.cnblogs.com/hookjc/ 那天是男孩的十九岁生日:男孩还是像平常一样,一大早就起来了(快七点了).一切都是那么的平常,直到第一节课下课,男孩的同窗 ...

  8. 【转】C# / Extension 扩展方法

    扩展方法简介扩展方法使你能够向现有类型"添加"方法,而无需创建新的派生类型.重新编译或以其他方式修改原始类型. 扩展方法是一种特殊的静态方法,但可以像扩展类型上的实例方法一样进行调 ...

  9. Jackson转换为Collection、Array

    1. Jackson转化为Array 注意的地方就是实体类一定要有无参的构造方法,否则会报异常 //com.fasterxml.jackson.databind.exc.InvalidDefiniti ...

  10. Cause: com.mysql.jdbc.exceptions.jdbc4.CommunicationsException: Communications link failure 解决

    感谢大佬:https://blog.csdn.net/a704397849/article/details/93797529 springboot + mybatis多数据库 + druid连接池配置 ...