Vue页面上实时显示当前时间,每秒更新
有时候我们需要在页面上添加一个类似时钟的东西来实时显示当前时间,这个时候我们可以利用定时器来完成这个功能
<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页面上实时显示当前时间,每秒更新的更多相关文章
- JavaScript实时显示当前时间的例子
用javascript代码在当前页面中实时显示当前时间.代码如下: <html> <head> <title>JavaScript 实时显示当前时间-www.jbx ...
- vue实时显示当前时间且转化为“yyyy-MM-dd hh:mm:ss”格式
在实际运用中时间格式"yyyy-MM-dd hh:mm:ss"用的最多,如果需要其他格式可根据需求自行修改,下面直接上代码: 引入相应的js即可运行 <!DOCTYPE ht ...
- Qt 实时显示系统时间
前言 我们用一个label控件来实时显示系统时间,用到 QTimer 和 QDateTime 这个两个类. 正题 头文件: #ifndef MAINWINDOW_H #define MAINWINDO ...
- Android学习总结——实时显示系统时间
我们都知道System.currentTimeMillis()可以获取系统当前的时间,这里要实时显示就可以开启一个线程,然后通过handler发消息,来实时的更新TextView上显示的系统时间.具体 ...
- js实时显示系统时间
刚刚在做后台页面最上面要动态显示时间刚写了这个代码 将这段代码加入<head></head> <!--时间显示代码 --><script>functio ...
- Jquery循环select标签,并给指定option添加select属性后在页面上不显示的问题
<select id="testId"> <option value="">--请选择--</option> <opt ...
- Discuz常见小问题2-如何在新建的页面上只显示一部分板块
切换到论坛-版块管理,记住要只显示的板块的gid(比如我的是36) 为某个主导航设置一个单独的php页面(名字自己取) 如果这个页面内容跟首页forum.php完全一样,只是第三行增加了一句话 ...
- JavaScript实时显示当前时间
1.HTML部分 <div id="div1">显示当前时间!</div> 2.css部分 #div1 { width: 700px; height: 50 ...
- js(jquery)代码在页面上实时地显示时间
一.引入jquery 二.HTML代码 三.js代码 1)引入js代码 2)下面是完整的js代码
随机推荐
- Linux下使用Fastboot给手机刷ROM
前言 一直在刷机.失败.刷机.失败中,还好今天有个任务能够使用fastboot刷机.好开心,最终不用切换系统了.(话说好久没有写代码了,身为一个互联网程序猿,不写代码我easy紧张). 开发环境 Ub ...
- 改变Fragment的默认动画
FragmentTransaction ft = getFragmentManager().beginTransaction(); //设置进入退出动画 ft.setCustomAnimations( ...
- html&css基础框架
原文地址:http://www.w3cplus.com/framework/index.php
- 转:ios应用崩溃日志揭秘
http://www.raywenderlich.com/zh-hans/30818/ios应用崩溃日志揭秘
- es redis logstash 日志收集系统排错
用logstash收集日志并发送到redis,然后通过logstash取redis数据写入到es集群,最近kibana显示日志总是中断,日志收集不过来,客户端重启发现报错: Failed to sen ...
- delphi中检测局域网ip能够ping通模块
// 函数PingHost用于ping目标IP是否连通 // uses winsock 在uses中加入 winsock // 用法: if PingHost(edit2.Text) the ...
- Atitit. 订单管理 收银单持久化 功能设计 基于ecshop订单结构
Atitit. 订单管理 收银单持久化 功能设计 基于ecshop订单结构 1. 54.order_info 订单 数据结构1 2. Ecshop 的订单api1 2.1. 生成订单 code b ...
- 激活modelsim se 10.4 时运行patch_dll.bat不能生成TXT
问题描述: 激活modelsim时运行patch_dll.bat总是在DOS界面一闪而过,不能生成LICENSE.TXT 问题解决: 先取消文件 mgls64.dll 的只读属性(这句话在README ...
- [na]整一下博客面貌--cnblog css定制
前言 之前觉得cnblog排版乱. 而csdn对word兼容性较好一些.所以就转到csdn了. 后来看到别人的cnblog排版挺好,如 等效果. 参考资料 http://www.cnblogs.com ...
- wxPython 4.0.0b2安装
https://www.cnblogs.com/NanShan2016/p/5518235.html 亮的界面是一个GUI程序必不可少的一部分,wxPython可以做到这一点,加之Python强大的功 ...