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

<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. iOS开发-自动布局之autoresizingMask使用详解(Storyboard&Code)

    前言:现在已经不像以前那样只有一个尺寸,现在最少的IPHONE开发需要最少需要适配三个尺寸.因此以前我们可以使用硬坐标去设定各个控件的位置,但是现在的话已经不可以了,我们需要去做适配,也许你说可以使用 ...

  2. Android apktool反编译资源文件为空解决办法(测试天猫、淘宝等apk成功)

    1 Exception in thread main brut.androlib.androlibexception multiple resources 解决办法:下载最新的apktool,在goo ...

  3. 初学spring(一)

    1.spring 在ssh 中所处的位置 struts 是web框架(jsp,action,actionform) hibernate 是orm框架,处于数据持久层 spring 是容器框架,配置be ...

  4. redis主从和主从切换

    redis数据量增加,导致内存不够用,要迁移分离redis和程序: 1. 在新redis服务器上,启动一个redis实例,配置和master配置一致,不同的是配置文件中修改并启用 slave-read ...

  5. 指尖上的电商---(8)Solr中Facet的使用方法

    在大型电子商务站点中,在商品列表页,我们都能够看到商品按分类,品牌,价格的分类显示,例如以下图,这些我们能够使用solr中的facet功能实现. facet的基本功能就是对搜索结果中的商品进行分类. ...

  6. 深入理解get和post的区别

    GET和POST是HTTP请求的两种基本方法,要说它们的区别,接触过WEB开发的人都能说出一二.最直观的区别就是GET把参数包含在URL中,POST通过request body传递参数. 正常GET和 ...

  7. xilinx平台DDR3设计教程之仿真篇_中文版教程

    https://wenku.baidu.com/view/ac32c8bcf705cc1754270923.html https://wenku.baidu.com/view/1d665697f185 ...

  8. varnish学习笔记

    varnish cache是一款开源的高性能的缓存server.和老牌的Squid对照有例如以下长处. 1:varnish是基于内存缓存数据的,所以处理速度比Squid要快. 2:varnish支持更 ...

  9. c++ 宏 #val 在unicode下的使用。

    #define CHECK(condition) cout<<check failed:<<#condition<<endl; 上面这句宏,当你 CHECK(myf ...

  10. [转]为什么我说ORM是一种反模式

    原文地址:http://www.nowamagic.net/librarys/veda/detail/2217 上周我在在上讨论了ORM,在那以后有人希望我澄清我的意思.事实上,我曾经写文章讨论过OR ...