Vue 中获取当前时间并实时刷新的实现代码


Posted in Javascript onMay 12, 2020

1. 实现代码

<template>
 <div>
  {{nowDate}}{{nowWeek}}{{nowTime}}
 </div>
</template>

<script>
export default {
 data(){
  return {
   nowDate: "",  // 当前日期
   nowTime: "",  // 当前时间
   nowWeek: ""   // 当前星期
  }
 },
 methods:{
  dealWithTime(data) { // 获取当前时间
   let formatDateTime;
   let Y = data.getFullYear();
   let M = data.getMonth() + 1;
   let D = data.getDate();
   let H = data.getHours();
   let Min = data.getMinutes();
   let S = data.getSeconds();
   let W = data.getDay();
   H = H < 10 ? "0" + H : H;
   Min = Min < 10 ? "0" + Min : Min;
   S = S < 10 ? "0" + S : S;
   switch (W) {
    case 0:
     W = "日";
     break;
    case 1:
     W = "一";
     break;
    case 2:
     W = "二";
     break;
    case 3:
     W = "三";
     break;
    case 4:
     W = "四";
     break;
    case 5:
     W = "五";
     break;
    case 6:
     W = "六";
     break;
    default:
     break;
   }
   this.nowDate = Y + "年" + M + "月" + D + "日 ";
   this.nowWeek = "周" + W ; 
   this.nowTime = H + ":" + Min + ":" + S;
   // formatDateTime = Y + "年" + M + "月" + D + "日 " + " 周" +W + H + ":" + Min + ":" + S;
  },
 },
 mounted() { 
  // 页面加载完后显示当前时间
  this.dealWithTime(new Date())
  // 定时刷新时间
  this.timer = setInterval(()=> {
    this.dealWithTime(new Date()) // 修改数据date
  }, 500)
 }, 
 destroyed() {
  if (this.timer) { // 注意在vue实例销毁前,清除我们的定时器
   clearInterval(this.timer);
  }
 }
}
</script>

<style lang="scss" scope>

</style>

2. 实现效果

Vue 中获取当前时间并实时刷新的实现代码

总结

到此这篇关于Vue 中获取当前时间并实时刷新的实现代码的文章就介绍到这了,更多相关vue获取当前时间实时刷新内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
JavaScript编程开发中的五个实用小技巧
Jul 22 Javascript
jQuery 翻牌或百叶窗效果(内容三秒自动切换)
Jun 14 Javascript
jQuery获取Select选择的Text和Value(详细汇总)
Jan 25 Javascript
jQuery对象数据缓存Cache原理及jQuery.data方法区别介绍
Apr 07 Javascript
jquery中通过父级查找进行定位示例
Jun 28 Javascript
javascript异步编程代码书写规范Promise学习笔记
Feb 11 Javascript
JavaScript构造函数详解
Dec 27 Javascript
jQuery实现的超简单点赞效果实例分析
Dec 31 Javascript
js eval函数使用,js对象和字符串互转实例
Mar 06 Javascript
package.json文件配置详解
Jun 15 Javascript
vue框架制作购物车小球动画效果实例代码
Sep 26 Javascript
Vue父子传递实例讲解
Feb 14 Javascript
JavaScript 函数用法详解【函数定义、参数、绑定、作用域、闭包等】
May 12 #Javascript
JavaScript 面向对象程序设计详解【类的创建、实例对象、构造函数、原型等】
May 12 #Javascript
JavaScript 接口原理与用法实例详解
May 12 #Javascript
ES5新增数组的实现方法
May 12 #Javascript
JavaScript内置对象之Array的使用小结
May 12 #Javascript
详解ES6新增字符串扩张方法includes()、startsWith()、endsWith()
May 12 #Javascript
Vue 中如何将函数作为 props 传递给组件的实现代码
May 12 #Javascript
You might like
简单介绍下 PHP5 中引入的 MYSQLI的用途
2007/03/19 PHP
php数组函数序列之array_unshift() 在数组开头插入一个或多个元素
2011/11/07 PHP
php安全开发 添加随机字符串验证,防止伪造跨站请求
2013/02/14 PHP
鸡肋的PHP单例模式应用详解
2013/06/03 PHP
PHP简单读取PDF页数的实现方法
2016/07/21 PHP
PHP自定义函数格式化json数据示例
2016/09/14 PHP
基于jquery的direction图片渐变动画效果
2010/05/24 Javascript
JQuery中each()的使用方法说明
2010/08/19 Javascript
JS控制输入框内字符串长度
2014/05/21 Javascript
JQuery 使用attr方法实现下拉列表选中
2014/10/13 Javascript
angularJS 入门基础
2015/02/09 Javascript
nodejs和C语言插入mysql数据库乱码问题的解决方法
2017/04/14 NodeJs
jQuery 利用ztree实现树形表格的实例代码
2017/09/27 jQuery
Vue.js 点击按钮显示/隐藏内容的实例代码
2018/02/08 Javascript
vue 子组件向父组件传值方法
2018/02/26 Javascript
js操作二进制数据方法
2018/03/03 Javascript
el-form 多层级表单的实现示例
2020/09/10 Javascript
[01:00:54]TI4正赛第二日开场
2014/07/20 DOTA
python使用scrapy解析js示例
2014/01/23 Python
Python创建xml的方法
2015/03/10 Python
python3+dlib实现人脸识别和情绪分析
2018/04/21 Python
在Python中获取两数相除的商和余数方法
2018/11/10 Python
对Python3 序列解包详解
2019/02/16 Python
Python实用库 PrettyTable 学习笔记
2019/08/06 Python
tensorflow获取预训练模型某层参数并赋值到当前网络指定层方式
2020/01/24 Python
python3中TQDM库安装及使用详解
2020/11/18 Python
css3进行截取替代js的substring
2013/09/02 HTML / CSS
出纳员的岗位职责
2014/02/22 职场文书
小学生家长寄语
2014/04/02 职场文书
《画》教学反思
2014/04/14 职场文书
六一文艺汇演开幕词
2015/01/29 职场文书
酒店前台岗位职责
2015/04/16 职场文书
2015年党建工作汇报材料
2015/06/25 职场文书
大学毕业典礼致辞
2015/07/29 职场文书
未来,这5大方向都很适合创业
2019/07/22 职场文书
Python 数据可视化神器Pyecharts绘制图像练习
2022/02/28 Python