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

第一步:在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. Kitty-Cloud服务搭建过程剖析

    项目地址 https://github.com/yinjihuan/kitty-cloud 服务搭建 大家目前看到的都是我已经搭建好了的服务,如果让你从零开始自己搭建一个微服务的项目,要怎么做? 我们 ...

  2. 类 文件 右下角呈现 红色小圆圈,里面有一个J 标记

    intellj(idea) 项目中类 文件 右下角呈现 红色小圆圈,里面有一个J 标记,表明此为 未设置为源文件,没有编译,本来应该是属于源文件的,结果现在没有被标记为源文件,也就没法编译了.

  3. Java课程设计之——爬虫篇

    主要使用的技术 Httplcient Jsoup 多线程 dao模式 网络爬虫简介 网络爬虫(又称为网页蜘蛛,网络机器人,在FOAF社区中间,更经常的称为网页追逐者),是一种按照一定的规则,自动地抓取 ...

  4. AJ学IOS(46)之网易彩票幸运大转盘

    AJ分享,必须精品 效果 实现过程: 基础UI搭建 这里主要是用了xib搭建,首先我们分析,有中间的开始按钮,背景图片,还有星座按钮,这里能用xib做的事开始按钮和背景图片. 如图: 星座按钮的搭建: ...

  5. VCL安装有哪几种方法?

    不是由Borland 提供的组件叫第三方组件: 就目前常见的各种形式的组件的安装方法介绍一下. 1.只有一个DCU文件的组件.DCU文件是编译好的单元文件,这样的组件是作者不想把源码公布.一般来说,作 ...

  6. 【selenium】各种exception

    selenium中的Exception解释 exception selenium.common.exceptions.ElementClickInterceptedException(msg=None ...

  7. linux通过进程名查看其占用端口

    1.先查看进程pid ps -ef | grep 进程名 2.通过pid查看占用端口 netstat -nap | grep 进程pid 参考: https://blog.csdn.net/sinat ...

  8. 配置CORS代理请求

    参考资料: Vue-CLI 3.x 跨域问题处理 使用代理设置:见官方文档 配置代理 新建配置文件 在 package.json 文件的同级目录下创建 vue.config.js 文件,文件的格式应该 ...

  9. Redis安装部署(一主二从三哨兵)

    需求:根据当前客户的生产环境,模拟安装部署Redis的测试环境,方便后续的功能测试. 1.准备工作 2.安装编译Redis 3.Redis运行环境配置 4.Redis启动和关闭 1.准备工作 Redi ...

  10. 解决cvc-complex-type.2.4.a: Invalid content was found starting with element

    今天用myeclipse导入 一个项目出现后出现cvc-complex-type.2.4.a: Invalid content was found starting with element 'inf ...