需求:获取当前系统时间,在页面上展示 年月日 时分秒 ,并且实时刷新,和系统时间保持一致

第一步:在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获取当前时间 实时刷新的更多相关文章

  1. Vue+WebSocket 实现页面实时刷新长连接

    最近vue项目要做数据实时刷新,折线图每秒重画一次,数据每0.5秒刷新一次,说白了就是实时刷新,因为数据量较大,用定时器估计页面停留一会就会卡死... 与后台人员讨论过后决定使用h5新增的WebSoc ...

  2. vue 获取当前时间 格式YYYY-MM-DD

    函数封装: /** * 获取当前时间 * 格式YYYY-MM-DD */ Vue.prototype.getNowFormatDate = function() { var date = new Da ...

  3. vue 获取当前时间

    timeNow () { return moment().utc().format('YYYY年MM月DD日') + ' ' + moment().utc().format('dddd')}

  4. js获取当前时间并实时刷新

    效果如图: 代码如下: <html> <head> <title>js获取当前时间并实时刷新</title> <script> //页面加载 ...

  5. JS获取当前日期时间并定时刷新

    JS获取当前日期时间 var date = new Date(); date.getYear(); //获取当前年份(2位) date.getFullYear(); //获取完整的年份(4位,2014 ...

  6. tab栏切换,内容为不断实时刷新数据的vue实现方法

    先说一下产品需求,就是有几个tab栏,每个tab栏对应的ajax请求不一样,内容区域一样,内容为实时刷新数据,每3s需要重新请求,返回的数据在内容区域展示,每点击一次tab栏需停止其他tab栏ajax ...

  7. HTML 中获取现在时间,实时时间获取

    JavaScript   Date 对象 Date 对象用于处理日期与实际. 创建 Date 对象: var now  =  new Date(). 方法 描述 getDate() 从 Date 对象 ...

  8. java SWT中Label实时刷新当前时间

    同样最近在开发swt的一个项目,业务中的一个功能模块类似百度网盘的上传进度条 0/80. 即已上传0个,总共80个.效果展示要的就是实时刷新,2/80呀,15/80呀,针对这个,就有了这篇文章. 下面 ...

  9. 使用SignalR实现比特币价格实时刷新

    ASP.NET SignalR是微软支持的一个运行在 Dot NET 平台上的 HTML Websocket 框架.它出现的主要目的是实现服务器主动推送(Push)消息到客户端页面,这样客户端就不必重 ...

随机推荐

  1. .Net微服务实战之技术架构分层篇

    一拍即合 上一篇<.Net微服务实战之技术选型篇>,从技术选型角度讲解了微服务实施的中间件的选择与协作,工欲善其事,必先利其器,中间件的选择是作为微服务的基础与开始,也希望给一直想在.Ne ...

  2. 实时OLAP分析利器Druid介绍

    文章目录 前言 Druid介绍 主要特性 基础概念 数据格式 数据摄入 数据存储 数据查询 查询类型 架构 运维 OLAP方案对比 使用场景 使用建议 参考 近期主题 前言 项目早期.数据(报表分析) ...

  3. Python线程和协程CPU资源利用率测试

    前言介绍 协程 ,又称为微线程,它是实现多任务的另一种方式,只不过是比线程更小的执行单元.因为它自带CPU的上下文,这样只要在合适的时机,我们可以把一个协程切换到另一个协程.通俗的理解: 在一个线程中 ...

  4. 差分数组&&定义&&使用方法&&与线段树的区别

    **1.定义**对于一个有n个元素的数组a[n],我们令a[i]-a[i-1]=d[i],且d[1]=a[1]-0=a[1];那么我们将d[i]称为**差分数组**---即记录数组中的每项元素与前一项 ...

  5. curl 交叉编译 支持http2和openssl

    touch run.sh chmod 755 run.sh mkdir build cd build ../run.sh run.sh #!/bin/bash #cd /build ../config ...

  6. 全方位认识HBase:一个值得拥有的NoSQL数据库(一)

    前言:说起HBase这门技术,在认知上对于稍微接触或使用过它的人来讲,可能只是百千数据库中一个很普通的库,大概就像我对Redis的认知一样:缓存嘛!可对于HBase,我确实是带着某些感情在的.今日突然 ...

  7. 正则表达式(JS表格简要总结)

    1. JS中正则表达式定义 JavaScript 中的正则表达式用 RegExp 对象表示. JS中定义正则表达式的两种方法: 方法 示例 RegExp 对象 var pattern = new Re ...

  8. 2019-07-25【机器学习】无监督学习之聚类 K-Means算法实例 (1999年中国居民消费城市分类)

    样本 北京,2959.19,730.79,749.41,513.34,467.87,1141.82,478.42,457.64天津,2459.77,495.47,697.33,302.87,284.1 ...

  9. 【Tool】IDEA配置Maven依赖管理

    IDEA配置Maven 打开IDEA,在项目界面打开[File] — [Settings] 找到构建工具,下面第一个就是Maven 主选项更换我们自己的主目录和设置目录与本地仓库 勾选[打印异常捕获信 ...

  10. Cilium使用 (Cilium 3)

    使用k3s测试Cilium,安装步骤可以参见官方文档 Cilium安装使用 docker安装 使用如下命令安装最新版本的docker yum install -y yum-utils \ device ...