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 相关文章推荐
动态改变textbox的宽高的js
Oct 26 Javascript
使用EXT实现无刷新动态调用股票信息
Nov 01 Javascript
jquery+json 通用三级联动下拉列表
Apr 19 Javascript
AJAX分页的代码(后台asp.net)
Feb 14 Javascript
jQuery EasyUI API 中文文档 - Dialog对话框
Nov 15 Javascript
javaScript 页面自动加载事件详解
Feb 10 Javascript
个人总结的一些JavaScript技巧、实用函数、简洁方法、编程细节
Jun 10 Javascript
基于vue中css预加载使用sass的配置方式详解
Mar 13 Javascript
使用FileReader API创建Vue文件阅读器组件
Apr 03 Javascript
Vue 自定义指令功能完整实例
Sep 17 Javascript
vue动态加载SVG文件并修改节点数据的操作代码
Aug 17 Javascript
vue 实现上传组件
May 31 Vue.js
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
PHP中上传大体积文件时需要的设置
2006/10/09 PHP
php mongodb操作类 带几个简单的例子
2016/08/25 PHP
innerHTML,outerHTML,innerText,outerText的用法及区别解析
2013/12/16 Javascript
JS实现可调整倒计时间代码分享
2015/08/18 Javascript
EasyUI Combobox设置默认值 获取text的方法
2016/11/28 Javascript
bootstrap学习使用(导航条、下拉菜单、轮播、栅格布局等)
2016/12/01 Javascript
详解jQuery停止动画——stop()方法的使用
2016/12/14 Javascript
less简单入门(CSS 预处理语言)
2017/03/08 Javascript
Node学习记录之cluster模块
2017/05/31 Javascript
JavaScript中附件预览功能实现详解(推荐)
2017/08/15 Javascript
vue.js异步上传文件前后端实现代码
2017/08/22 Javascript
vue数组对象排序的实现代码
2018/06/20 Javascript
jQuery中$原理实例分析
2018/08/13 jQuery
实例详解Vue项目使用eslint + prettier规范代码风格
2018/08/20 Javascript
利用Promise自定义一个GET请求的函数示例代码
2019/03/20 Javascript
nodejs检测因特网是否断开的解决方案
2019/04/17 NodeJs
使用原生js编写一个简单的框选功能方法
2019/05/13 Javascript
python dict.get()和dict['key']的区别详解
2016/06/30 Python
用python编写第一个IDA插件的实例
2018/05/29 Python
利用python画出折线图
2018/07/26 Python
Python将string转换到float的实例方法
2019/07/29 Python
python3中的eval和exec的区别与联系
2019/10/10 Python
python如何使用socketserver模块实现并发聊天
2019/12/14 Python
python实现PDF中表格转化为Excel的方法
2020/06/16 Python
浅谈Selenium+Webdriver 常用的元素定位方式
2021/01/13 Python
CSS3的 fit-content实现水平居中
2017/09/07 HTML / CSS
微软英国官方网站:Microsoft英国
2016/10/15 全球购物
工业自动化专业自荐信范文
2014/04/10 职场文书
三字经教学反思
2014/04/26 职场文书
幼儿园课题方案
2014/06/09 职场文书
2014年物流工作总结
2014/11/25 职场文书
html实现随机点名器的示例代码
2021/04/02 Javascript
Python 读写 Matlab Mat 格式数据的操作
2021/05/19 Python
python编写五子棋游戏
2021/05/25 Python
JavaScript执行机制详细介绍
2021/12/06 Javascript
深入讲解数据库中Decimal类型的使用以及实现方法
2022/02/15 MySQL