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

<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. lucene: nDocs must be > 0查询异常解决

    nDocs must be > 0     // 函数search(query,filter,n),其中query是查询条件,filter是过滤器,n查询数量,异常消息意思就是n参数的值必须大于 ...

  2. laravel框架查看执行过的sql语句

    1.在routes.php中添加如下语句 Event::listen('illuminate.query', function($sql,$param) {     file_put_contents ...

  3. php 按汉字首字母查询[转载]

    <?php function getfirstchar($s0){ //获取单个汉字拼音首字母.注意:此处不要纠结.汉字拼音是没有以U和V开头的 $fchar = ord($s0{0}); if ...

  4. 在连接mysql数据库时出错:The server time zone value '�й���׼ʱ��' is unrecognized or represents more than one time zone

    这个错误是时区导致的,所以需要在配置连接url后面加上时区: url=jdbc:mysql://localhost:3309/test?serverTimezone=UTC 其中UTC是统一标准世界时 ...

  5. jQuery 实现观察者模式

    github: https://github.com/mmikowski/jquery.event.gevent demo: $('body').append( "<div id='s ...

  6. nginx环境下启动php-fpm

    nginx环境下启动php-fpm 1.首先查看是否安装了php-fpm 这个我试了好多命令都不行比如 rpm -qa php-fpm , rpm -ql php-fpm , which php-fp ...

  7. unity, iOS集成微信

    将微信sdk直接拖进xcode会导致Library Search Paths是错的,需要手动改成如下样子(蓝色选中部分)才能通过编译:

  8. VS2017调试MVC程序,中文输入法下浏览器闪退,程序调试终止

    工具->选项-> 项目和解决方案->Web项目->浏览器窗口关闭时停止调试器(s) 复选√ 去掉即可,

  9. Visual Studio- “无法启动此程序,因为计算机中丢失 xxx.dll尝试重新安装该程序以解决此问题"

    下午使用VS 2013调试程序时,发现弹出了下列的错误弹框: 网上搜索之后发现是缺失了动态链接库(.dll)文件所致,因此只需要把相应的动态链接库文件放置到指定的目录即可. 另:64位系统用户需要注意 ...

  10. Creating Context Menu / 创建上下文菜单项 / VC++, Windows, DLL, ATL, COM

    创建上下文菜单项 1.新建一个ATL Project. 2.建议将Project Property中Linker – General - “Register Output” 设为no,C/C++ - ...