有时候我们需要在页面上添加一个类似时钟的东西来实时显示当前时间,这个时候我们可以利用定时器来完成这个功能

<div id="app">
{{date}}
</div>
<script>
export default {
data() {
return {
date: new Date()
};
},
mounted() {
let _this = this; // 声明一个变量指向Vue实例this,保证作用域一致
this.timer = setInterval(() => {
_this.date = new Date(); // 修改数据date
}, 1000)
},
beforeDestroy() {
if (this.timer) {
clearInterval(this.timer); // 在Vue实例销毁前,清除我们的定时器
}
}
};
</script>

这里的{{ date }}输出的是浏览器默认的时间格式,比如"2018-10-23T02:07:09.894Z",并非格式化时间yyyy-MM-dd hh:mm:ss,所以要注意时区。

这里有多种方法可以对时间格式化,比如赋值前先使用自定义函数处理,Vue的过滤器(filter)或计算属性(computed)也可以实现,这些以后写到。

嗯,就酱~~

Vue页面上实时显示当前时间,每秒更新的更多相关文章

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

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

  2. vue实时显示当前时间且转化为“yyyy-MM-dd hh:mm:ss”格式

    在实际运用中时间格式"yyyy-MM-dd hh:mm:ss"用的最多,如果需要其他格式可根据需求自行修改,下面直接上代码: 引入相应的js即可运行 <!DOCTYPE ht ...

  3. Qt 实时显示系统时间

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

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

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

  5. js实时显示系统时间

    刚刚在做后台页面最上面要动态显示时间刚写了这个代码 将这段代码加入<head></head> <!--时间显示代码 --><script>functio ...

  6. Jquery循环select标签,并给指定option添加select属性后在页面上不显示的问题

    <select id="testId"> <option value="">--请选择--</option> <opt ...

  7. Discuz常见小问题2-如何在新建的页面上只显示一部分板块

    切换到论坛-版块管理,记住要只显示的板块的gid(比如我的是36)   为某个主导航设置一个单独的php页面(名字自己取)   如果这个页面内容跟首页forum.php完全一样,只是第三行增加了一句话 ...

  8. JavaScript实时显示当前时间

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

  9. js(jquery)代码在页面上实时地显示时间

    一.引入jquery 二.HTML代码 三.js代码 1)引入js代码 2)下面是完整的js代码

随机推荐

  1. 错误: ISO C++ 不同意在类内初始化很量静态成员

    错误: ISO C++ 不同意在类内初始化很量静态成员      今天開始学C++ primer,在牵扯到Sales_item.h头文件时.出现了一些问题(和C++11新特性相关),当前的编译器版本号 ...

  2. 2B01-View-Switcher

    Gallery和swithcer联合使用 /* * Copyright (C) 2007 The Android Open Source Project * * Licensed under the ...

  3. 复杂可编程逻辑器件CPLD的基本结构

    复杂可编程逻辑器件CPLD的基本结构 文章出处:czhlcai 发布时间: 2008/12/08 | 6911 次阅读 专业薄膜开关打样工厂,12小时加急出货   1.基于乘积项的CPLD结构 CPL ...

  4. Python内置函数之all()

    all()函数返回值不是True就是False. 它只能传入一个参数,而且参数必须是可迭代对象,换句话说,参数不是元组就是列表(通常情况下). all()中的可迭代对象所有元素值为True或者不包含元 ...

  5. socket编程之多次收发数据

    客户端: #-*- coding:utf-8 -*- #客户端程序 import socket client = socket.socket() #1.创建一个客户端对象 client.connect ...

  6. swoole-1.7.18 版本已发布,支持 PHP7

    swoole-1.7.18 版本已发布,支持 PHP7 matyhtf 发布于: 2015年07月23日 (22评) 分享到:    收藏 +16 3月19日,深圳源创会火热报名中,go>> ...

  7. 教你实现类似于格瓦拉启动页中的放大转场动画(OC&Swift)

    教你实现类似于格瓦拉启动页中的放大转场动画(OC&Swift) 一.前言 用过格瓦拉电影,或者其他app可能都知道,一种点击按钮用放大效果实现转场的动画现在很流行,效果大致如下 在iOS中,在 ...

  8. android studio- java注释自己动手弄起来

    今天写段子...程序段子.突然觉得AS默认的注释太简洁,不适合自己.于是,自己琢磨半天,大概知道了途径.结果,好好的一个coding之夜也无疾而终了...明天继续跟着包工头学搬砖. 注释设置途径: 1 ...

  9. HUAWEI HiAI常见FAQ小贴士

    8月7日,HUAWEI HiAI系统架构师在CSDN平台为广大开发者进行了以“APP进阶实战:最快10分钟接入HUAWEI HiAI”主题的直播,迎来600多名开发者在线上观看. ​ 直播中,讲师详细 ...

  10. Java进阶03 IO基础(转载)

    IO示例 下面是演示的文件file.txt Hello World! Hello Nerd! 先来研究一个文件读取的例子: import java.io.*;public class Test{ pu ...