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 相关文章推荐
浅析showModalDialog数据缓存问题(用禁止浏览器缓存解决)
Jul 09 Javascript
使用jquery局部刷新(jquery.load)从数据库取出数据
Jan 22 Javascript
jQuery实现加入购物车飞入动画效果
Mar 14 Javascript
jQuery实现简单的图片查看器
Sep 11 Javascript
深入浅析AngularJS和DataModel
Feb 16 Javascript
Boostrap入门准备之border box
May 09 Javascript
关于backbone url请求中参数带有中文存入数据库是乱码的快速解决办法
Jun 13 Javascript
vue.js中$watch的用法示例
Oct 04 Javascript
Vue2学习笔记之请求数据交互vue-resource
Feb 23 Javascript
js前端日历控件(悬浮、拖拽、自由变形)
Mar 02 Javascript
JavaScript实现两个select下拉框选项左移右移
Mar 09 Javascript
微信小程序实战之自定义抽屉菜单(7)
Apr 18 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
ThinkPHP的MVC开发机制实例解析
2014/08/23 PHP
PHP微信红包生成代码分享
2016/10/06 PHP
PHP学习记录之数组函数
2018/06/01 PHP
prototype Element学习笔记(Element篇三)
2008/10/26 Javascript
JavaScript 原型继承
2011/12/26 Javascript
关于extjs4如何获取grid修改后的数据的问题
2013/08/07 Javascript
jquery新的绑定事件机制on方法的使用方法
2014/04/15 Javascript
jQuery用FormData实现文件上传的方法
2016/11/21 Javascript
js实现图片切换(动画版)
2016/12/25 Javascript
Bootstrap的popover(弹出框)在append后弹不出(失效)
2017/02/27 Javascript
vue之数据交互实例代码
2017/06/16 Javascript
javascript定时器取消定时器及优化方法
2017/07/08 Javascript
vue2实现数据请求显示loading图
2017/11/28 Javascript
vue-router 源码之实现一个简单的 vue-router
2018/07/02 Javascript
微信小程序实现团购或秒杀批量倒计时
2020/11/01 Javascript
微信小程序之事件交互操作实例分析
2018/12/03 Javascript
vue循环数组改变点击文字的颜色
2019/10/14 Javascript
js和jquery判断数据类型的4种方法总结
2020/08/28 jQuery
[01:35]2014DOTA2西雅图邀请赛 专访狐狸妈青春献给刀塔
2014/07/08 DOTA
python多线程操作实例
2014/11/21 Python
在Python的Flask框架下收发电子邮件的教程
2015/04/21 Python
python变量不能以数字打头详解
2016/07/06 Python
详解python读取和输出到txt
2019/03/29 Python
Python实现多态、协议和鸭子类型的代码详解
2019/05/05 Python
Pytorch中膨胀卷积的用法详解
2020/01/07 Python
python爬虫基础之urllib的使用
2020/12/31 Python
HTML5实现一个能够移动的小坦克示例代码
2013/09/02 HTML / CSS
Feelunique中文官网:欧洲最大化妆品零售电商
2020/07/10 全球购物
岗位廉政承诺书
2014/03/27 职场文书
新闻传媒系求职信范文
2014/04/19 职场文书
驾驶员培训方案
2014/05/01 职场文书
农村老人去世追悼词
2015/06/23 职场文书
大学生奶茶店创业计划书
2019/06/25 职场文书
解决MultipartFile.transferTo(dest) 报FileNotFoundExcep的问题
2021/07/01 Java/Android
gateway与spring-boot-starter-web冲突问题的解决
2021/07/16 Java/Android
Android 界面一键变灰 深色主题工具类
2022/04/28 Java/Android