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)消息到客户端页面,这样客户端就不必重 ...
随机推荐
- mysql 多个属性排序查询
查询 排序(order by) 语法:order by 字段 asc/desc asc 顺序,正序.数值 :递增,字母:自然顺序(a-z) desc 倒序 反序 数值:递减, 字母:自然反序 查询的宗 ...
- pgsql的使用
Deepin上面pgsql的启动 service postgresql start 停止 service postgresql stop 查看pgsql的版本 psql --version
- tf.nn.bias_add 激活函数
tf.nn.bias_add(value,bias,data_format=None,name=None) 参数: value:一个Tensor,类型为float,double,int64,int32 ...
- AJ学IOS(05)UI之360等下载管理器九宫格UI
AJ分享,必须精品 先看效果 主要是完成了九宫格UI的搭建 代码 - (void)viewDidLoad { [super viewDidLoad]; //九宫格中每个格子的宽 #define kAp ...
- 你知道如何自动保存 Spring Boot 应用进程号吗
1. 前言 欢迎阅读 Spring Boot 2 实战 系列文章. PID 对于系统运维来说并不陌生,但是对于一些开发者特别是新手还是要简单介绍一下的.它是 Process ID 的简称,是系统分配给 ...
- pickle\json,configparser,hashlib模块
python常用模块 目录 python常用模块 json模块\pickle模块 configparser模块 hashlib模块 subprocess模块 json模块\pickle模块 首先说一下 ...
- BUG 测试计划
性能追求 目前状况 测试标准 APP平稳运行,无crush现象 快速下拉翻页时,崩溃退出 要求多人使用,均流畅无异常退出方可 页面的放大缩小不会造成页面显 ...
- 搭建Ubuntu虚拟机
搭建Ubuntu虚拟机 前言 1. 啰嗦一下 1.1 ubuntu虚拟机的作用 1.2 为什么选择Ubuntu 1.3 工具准备 2. 正式开始 2.1 安装VMware 2.2 创建Ubuntu虚拟 ...
- eclipse 集成git工具
1.eclipse git插件下载 打开Eclipse,然后点击Help>Install New Software>Add name:git location:http://downloa ...
- 基于layui,Jquery 表格动态编辑 设置 编辑值为 int 或者 double 类型及默认值
首先先推荐大家在看这篇笔记时,阅读过我写的这篇 Layui表格编辑[不依赖Layui的动态table加载] 阅读过上面那篇笔记之后呢,才能更好的理解我现在所要说的这个东西 接下来废话不多说,上代码. ...