vue获取当前时间 实时刷新
需求:获取当前系统时间,在页面上展示 年月日 时分秒 ,并且实时刷新,和系统时间保持一致 第一步:在deta 里面声明两个变量
第二步:把时间调用写在created() 生命周期里面,进入页面就需要调用
第三步:离开页面使用beforeDestroy() 销毁
如下:
data() {
return {
timer: "",//定义一个定时器的变量
currentTime: new Date(), // 获取当前时间
};
},
created() {
var _this = this; //声明一个变量指向Vue实例this,保证作用域一致
this.timer = setInterval(function() {
_this.currentTime = //修改数据date
new Date().getFullYear() +
"-" +
(new Date().getMonth() + 1) +
"-" +
new Date().getDate() +
" " +
new Date().getHours() +
":" +
new Date().getMinutes() +
": " +
new Date().getSeconds();
}, 1000);
},
beforeDestroy() {
if (this.timer) {
clearInterval(this.timer); // 在Vue实例销毁前,清除我们的定时器
}
}
这样就能满足需求了 拿到的时间格式是 2019-8-16 8:9: 5
小于10的没有加 0
如果需要的话可以使用下面的方法加上就可以了
//过滤加0
appendZero(obj) {
if (obj < 10) {
return "0" + obj;
} else {
return obj;
}
},
vue获取当前时间 实时刷新的更多相关文章
- Vue+WebSocket 实现页面实时刷新长连接
最近vue项目要做数据实时刷新,折线图每秒重画一次,数据每0.5秒刷新一次,说白了就是实时刷新,因为数据量较大,用定时器估计页面停留一会就会卡死... 与后台人员讨论过后决定使用h5新增的WebSoc ...
- vue 获取当前时间 格式YYYY-MM-DD
函数封装: /** * 获取当前时间 * 格式YYYY-MM-DD */ Vue.prototype.getNowFormatDate = function() { var date = new Da ...
- vue 获取当前时间
timeNow () { return moment().utc().format('YYYY年MM月DD日') + ' ' + moment().utc().format('dddd')}
- js获取当前时间并实时刷新
效果如图: 代码如下: <html> <head> <title>js获取当前时间并实时刷新</title> <script> //页面加载 ...
- JS获取当前日期时间并定时刷新
JS获取当前日期时间 var date = new Date(); date.getYear(); //获取当前年份(2位) date.getFullYear(); //获取完整的年份(4位,2014 ...
- tab栏切换,内容为不断实时刷新数据的vue实现方法
先说一下产品需求,就是有几个tab栏,每个tab栏对应的ajax请求不一样,内容区域一样,内容为实时刷新数据,每3s需要重新请求,返回的数据在内容区域展示,每点击一次tab栏需停止其他tab栏ajax ...
- HTML 中获取现在时间,实时时间获取
JavaScript Date 对象 Date 对象用于处理日期与实际. 创建 Date 对象: var now = new Date(). 方法 描述 getDate() 从 Date 对象 ...
- java SWT中Label实时刷新当前时间
同样最近在开发swt的一个项目,业务中的一个功能模块类似百度网盘的上传进度条 0/80. 即已上传0个,总共80个.效果展示要的就是实时刷新,2/80呀,15/80呀,针对这个,就有了这篇文章. 下面 ...
- 使用SignalR实现比特币价格实时刷新
ASP.NET SignalR是微软支持的一个运行在 Dot NET 平台上的 HTML Websocket 框架.它出现的主要目的是实现服务器主动推送(Push)消息到客户端页面,这样客户端就不必重 ...
随机推荐
- NumPy学习2:基本运算
数组相减: a = array([20, 30, 40, 50])print ab = arange(4)print bc = a-bprint c 结果: [20 30 40 50][0 1 2 3 ...
- lr具体使用步骤概述
lr具体使用 1 无工具情况下的性能测试 2性能测试工具LoadRunner的工作原理 3 VuGen应用介绍 4 协议的类型及选择方法 5 脚本的创建过程 6 脚本的参数化 7 调试技术 8 Con ...
- Linux c++ vim环境搭建系列(6)——CMakeLists.txt多文档多目录组织方法和编写示例
CMakeLists.txt学习 1. 概要 主要是关于cmakelists.txt的编写模板,和多文档多目录的组织方法详解, 涉及第三方库的添加使用方法. 这里主要介绍cmakelists.txt的 ...
- 运输层--------运输层与网络层的关系、UDP、TCP
一.运输层与网络的区别: 网络层提供了主机之间的逻辑通信,而运输层为运行在不同主机上的进程之间提供了逻辑通信 二.实例证明: 考虑有两个家庭,一家位于美国东岸,一家位于美国西海岸,每家有12孩子.东海 ...
- EwoMail开源邮件服务器软件搭建
EwoMail开源邮件服务器软件简介 EwoMail是基于Linux的开源邮件服务器软件,集成了众多优秀稳定的组件,是一个快速部署.简单高效.多语言.安全稳定的邮件解决方案,帮助你提升运维效率,降低 ...
- sublime text3添加并修改编译系统
版权声明:本文为CSDN博主「肥宅_Sean」的原创文章,遵循 CC 4.0 BY-SA 版权协议,原文链接 方法工具 -> 编译系统 -> 新建编译系统 按ctrl+s保存.(注意,这里 ...
- 同事上班时间无聊,用python敲出贪吃蛇游戏打发时间
自从学会啦python,再也不用担心上班时间老板发现我打游戏啦 贪吃蛇代码: 还有不懂的(https://www.ixigua.com/i6808019824560570888/)这里有视频教程. 如 ...
- Wireshark的两种过滤器与BPF过滤规则
Wirshark使用的关键就在于过滤出想要的数据包,下面介绍怎么过滤. 抓包过滤器 Wirshark有两种过滤器,一个是抓包过滤器,一个是显示过滤器,他们之间的区别在于抓包过滤器只抓取你设置的规则,同 ...
- linux CVE-2019-13272 本地特权漏洞
漏洞描述 在5.1.17之前的Linux内核中,kernel / ptrace.c中的ptrace_link错误地处理了想要创建ptrace关系的进程的凭据记录,这允许本地用户通过利用父子的某些方案来 ...
- [护网杯2018] easy_laravel
前言 题目环境 buuoj 上的复现,和原版的题目不是完全一样.原题使用的是 nginx + mysql 而 buuoj 上的是 apache + sqlite composer 这是在 PHP5.3 ...