当前位置： 移动技术网 > IT编程>开发语言>JavaScript > Vue 中获取当前时间并实时刷新的实现代码

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

2020年06月23日  | 移动技术网IT编程  | 我要评论

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获取当前时间实时刷新内容请搜索移动技术网以前的文章或继续浏览下面的相关文章希望大家以后多多支持移动技术网！

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网