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

<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. Python-PyQt安装

    Windows下安装PyQt需要使用 mingw32-make工具, 以在windows下make

  2. web 图片上传实现本地预览

    在说上传之前先说说如何替换or美化浏览器自带的简陋上传按钮(自定义自己的上传按钮 如:img): 1.将自定义上传按钮上方添加 input file 框,实现input实现透明处理. 2.对自定义上传 ...

  3. ssh-keygen配合ssh_config免密码登录VPS

    ssh-keygen配合ssh_config免密码登录VPS Posted by fiture / 2012年12月29日 / 「Ubuntu」「分享」 用过终端登录远程服务器或者VPS的童鞋都用过类 ...

  4. There's no Qt version assigned to this project for platform Win32. Please use the 'change Qt version' feature and choose a valid Qt version for this platform.

    这个是用在vs2015时爆出的问题. 解决方法是: 1.鼠标放置在解决方案中的工程名处,用鼠标右键点击(右击). 2.选择Qt Project Settings,在弹出的对话框中的version栏处填 ...

  5. iOS开发正则表达式的学习

    正则表达式笔记 每天的一小步,知道我在不断进步,这就是我每天的小目标. 这是我的第一篇博客,在工作之余,我会努力地留下些许脚印. 我是一名iOS开发者,对于iOS我仅仅只是一个菜鸟,愿意在此处留下我的 ...

  6. iOS开发常见错误(转)

    //大全 //读取数据库数据 -(void)movethesqlitefile{ NSString *sourcepath=[[NSBundle mainBundle]pathForResource: ...

  7. PCB焊接工艺

    1. 有铅焊接工艺    240~260℃. 2. BGA焊盘直径为球径80%.

  8. ZOJ 3962 Seven Segment Display 16进制的八位数加n。求加的过程中所有的花费。显示[0,F]有相应花费。

    Seven Segment Display Time Limit: Seconds Memory Limit: KB A seven segment display, or seven segment ...

  9. python第三周文件处理和函数-----下

    #默认参数的值是在一开始定义的时候就传给了函数, # 在后来的修改中不会被修改. #默认参数的值必须放到位置形参参数的最后面 #默认参数使用的场景是一个参数不经常变得场景,所以参数一般是不可变类型.字 ...

  10. TP中单字母快捷函数总结

    ThinkPHP中有许多使用简便的单字母函数,可以很方便开发者快速的调用,但是字母函数却不方便记忆,本文将所有的字母函数总结一下,以方便以后查找.1.U() URL组装 支持不同URL模式 U($ur ...