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

<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. Refactoring之——代码的坏味道(二)过大的类 &(三)基本类型偏执

    1.1.2 Large Class(过大的类) 特征:一个类包含过多的字段.方法.代码行. 问题原因: 类通常一开始很小,但是随着程序的增长而逐渐膨胀. 类似于过长方法,程序员通常觉得在一个现存类中添 ...

  2. leetcode 43 Multiply Strings 大数相乘

    感觉是大数相乘算法里面最能够描述.模拟演算过程的思路 class Solution { public String multiply(String num1, String num2) { if(nu ...

  3. Redis之Hash数据结构

    0.前言 redis是KV型的内存数据库, 数据库存储的核心就是Hash表, 我们执行select命令选择一个存储的db之后, 所有的操作都是以hash表为基础的, 下面会分析下redis的hash数 ...

  4. linux系统之free命令详解

    total used free shared buffers cached Mem: -/+ buffers/cache: Swap: 上面是free命令的执行结果,下面我来详细说说其中的含义: Me ...

  5. ajax请求后台返回map类型并如何展示

    前台jsp或者ftl文件接收返回结果: <input type="hidden" name="selectedModelListStr" id=" ...

  6. Java并发编程(十三)在现有的线程安全类中添加功能

    重用现有的类而不是创建新的类,可以降低工作量,开发风险以及维护成本. 有时候线程安全类可以支持我们所有的操作,但更多时候,现有的了类只能支持大部分的操作,此时就需要在不破坏线程安全性的情况下添加一个新 ...

  7. 不再为无限级树结构烦恼,且看此篇s

    很久都没有写点什么出来分享了,最近在做多级树的时候,发现来来回回写过很多遍,于是封装成用户控件,以方便日后重复使用. 首先上效果: 我们看到以上2种效果,都是支持任意级的,这里源码中使用的是递归,以便 ...

  8. G - Harmonic Number (II) 找规律--> 给定一个数n,求n除以1~n这n个数的和。n达到2^31 - 1;

    /** 题目:G - Harmonic Number (II) 链接:https://vjudge.net/contest/154246#problem/G 题意:给定一个数n,求n除以1~n这n个数 ...

  9. mysql 京东

    DROP TABLE IF EXISTS `jd_admin`;CREATE TABLE `jd_admin` ( `id` int(10) unsigned NOT NULL AUTO_INCREM ...

  10. 【转】Monkey测试3——Monkey测试结果分析

    Monkey测试结果分析 一. 初步分析方法: Monkey测试出现错误后,一般的差错步骤为以下几步: 1. 找到是monkey里面的哪个地方出错 2. 查看Monkey里面出错前的一些事件动作,并手 ...