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 相关文章推荐
Knockoutjs的环境搭建教程
Nov 26 Javascript
利用webqq协议使用python登录qq发消息源码参考
Apr 08 Javascript
JS连接SQL数据库与ACCESS数据库的方法实例
Nov 21 Javascript
jfinal与bootstrap的登录跳转实战演习
Sep 22 Javascript
Angular Module声明和获取重载实例代码
Sep 14 Javascript
浅谈webpack4.x 入门(一篇足矣)
Sep 05 Javascript
详解webpack打包第三方类库的正确姿势
Oct 20 Javascript
加快Vue项目的开发速度的方法
Dec 12 Javascript
vue中使用 pako.js 解密 gzip加密字符串的方法
Jun 10 Javascript
vscode vue 文件模板的配置方法
Jul 23 Javascript
使用layui的layer组件做弹出层的例子
Sep 27 Javascript
node.js事件轮询机制原理知识点
Dec 22 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
关于时间计算的结总
2006/12/06 PHP
php中截取字符串支持utf-8
2007/01/18 PHP
PHP开发需要注意的安全问题
2010/09/01 PHP
php strrpos()与strripos()函数
2013/08/31 PHP
php检测数组长度函数sizeof与count用法
2014/11/17 PHP
php使用指定编码导出mysql数据到csv文件的方法
2015/03/31 PHP
DEDECMS首页调用图片集里的多张图片
2015/06/05 PHP
php计划任务之验证是否有多个进程调用同一个job的方法
2015/12/07 PHP
php原生导出excel文件的两种方法(推荐)
2016/11/19 PHP
Yii全局函数用法示例
2017/01/22 PHP
Ubuntu彻底删除PHP7.0的方法
2018/07/27 PHP
解决在laravel中leftjoin带条件查询没有返回右表为NULL的问题
2019/10/15 PHP
50个优秀经典PHP算法大集合 附源码
2020/08/26 PHP
解析Jquery中如何把一段html代码动态写入到DIV中(实例说明)
2013/07/09 Javascript
JS中判断字符串中出现次数最多的字符及出现的次数的简单实例
2016/06/03 Javascript
HTML页面定时跳转方法解析(2种任选)
2016/12/22 Javascript
JavaScript中localStorage对象存储方式实例分析
2017/01/12 Javascript
最全正则表达式总结:验证QQ号、手机号、Email、中文、邮编、身份证、IP地址等
2017/08/16 Javascript
Angular实现点击按钮控制隐藏和显示功能示例
2017/12/29 Javascript
解决vue 格式化银行卡(信用卡)每4位一个符号隔断的问题
2018/09/14 Javascript
分享5个好用的javascript文件上传插件
2018/09/16 Javascript
JavaScript定时器使用方法详解
2020/03/26 Javascript
python列表去重的二种方法
2014/02/14 Python
Python实现的Excel文件读写类
2015/07/30 Python
Python利用前序和中序遍历结果重建二叉树的方法
2016/04/27 Python
Python爬虫获取整个站点中的所有外部链接代码示例
2017/12/26 Python
python dataframe astype 字段类型转换方法
2018/04/11 Python
python 对字典按照value进行排序的方法
2019/05/09 Python
Tensorflow的常用矩阵生成方式
2020/01/04 Python
python基于爬虫+django,打造个性化API接口
2021/01/21 Python
大学生毕业自我鉴定
2013/11/06 职场文书
经济管理专业毕业生自荐信范文
2014/01/02 职场文书
销售辞职报告范文
2014/01/12 职场文书
预备党员群众路线思想汇报2014
2014/10/25 职场文书
关于环保的宣传稿
2015/07/23 职场文书
六年级语文教学反思
2016/03/03 职场文书