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

<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. svn命令行版本回滚

    下面以版本号2011回滚到2010为例,在命令行输入: svn merge --dry-run -r 2011:2010 http://my.repository.com/my/project/tru ...

  2. 02-3设置第一启动项--进入BIOS设置USB方式启动

    设置USB方式启动 https://zhinan.sogou.com/guide/detail/?id=1610014869 如何设置电脑从U盘启动呢?今天小编教大家如何进入BIOS设置USB方式启动 ...

  3. centos7单机版安装hbase

    1.首先安装jdk1.8 yum install java-1.8.0-openjdk* -y 2.下载hbase 地址:http://mirrors.shuosc.org/apache/hbase/ ...

  4. vs mvc 视图中找不到 viewdata viewbag的解决方案

    1.查看views下的web.config文件是否存在 2.检查config中system.web.mvc ,version中版本号与自己的vs内置mvc版本一致 迁移项目可能有此问题

  5. chrome mp4格式支持问题

    经过一些搜索得知,其实根本的问题是虽然大家都是.mp4后缀的文件,但是编码方式不同,而video标签的标准是用H.264方式编码视频的MP4文件(当然video标签还可以播放WebM和OGG格式的文件 ...

  6. unity, use particleSystem with UGUI

    要想在UGUI上添加particleSystem,需要将Canvas的Render Mode设置为Screen Space - Camera,并为其Render Camera指定一个Orthograp ...

  7. android动画具体解释二 属性动画原理

    property动画是一个强大的框架,它差点儿能使你动画不论什么东西. 你能够定义一个动画来改变对象的不论什么属性,不论其是否被绘制于屏幕之上. 一个属性动画在一定时间内多次改变一个属性(对象的一个字 ...

  8. [原创]超强C#图片上传,加水印,自动生成缩略图源代码

    <%@ Page Language=“C#“ AutoEventWireup=“true“ %> <%@ Import Namespace=“System“ %> <%@ ...

  9. 【转】锤子CTO钱晨:福利好是一种堕落的公司文化

    “这是拉勾网对锤子科技CTO钱晨的访谈,作为中国手机界三大产品经理之一,他带领着一众硬件工程师在手机红海中厮杀.钱晨喜欢焦虑的工程师,佩服有方向感的人. 本文作者:西岳 拉勾网原创出品,转载请注明作者 ...

  10. socket编码问题

    server.py import socket ip_port = ('127.0.0.1',9999) sk = socket.socket() sk.bind(ip_port) sk.listen ...