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

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

赞 (0)

相关推荐

  • 基于Vue实现tab栏切换内容不断实时刷新数据功能

    基于Vue实现tab栏切换内容不断实时刷新数据功能

    先说一下产品需求,就是有几个tab栏,每个tab栏对应的ajax请求不一样,内容区域一样,内容为实时刷新数据,每3s需要重新请求,返回的数据在内容区域展示,每点击一次tab栏需停止其他tab栏ajax请求,防止阻塞,首次加载页面的时候又不能5个ajax同时请求,只需要请求第一个就好 也没有必要建立5个区域,控制显示隐藏,浪费性能,业务代码就不贴了,把大概原理的代码贴上来 先是用jq实现了一版 <!DOCTYPE html> <html lang="en"> &l

  • VUE简单的定时器实时刷新的实现方法

    说明:我只是一个刚入门的小前端,你们可以指导我,但千万不要喷我,虽然我知道我很垃圾!人吗,都是要成长的!大佬,请多多指教!!! 我前段时间刚刚写了一个类似余股票的项目,上边的K线图是要实时去刷新的,所以要用vue做一个心跳,当然大家也可以选择用websocket,大佬们感觉肯定很简单,但是我只是一个刚入门的小前端,特此记录一下. 思路 其实思路很简单,首先要了解vue的生命周期和vue的内置函数,其思路就是先定义一个定时器,然后去定时请求后台,到最后关闭这个定时器,哈哈,是不是都是废话,但是确实

  • Vue filter 过滤当前时间 实现实时更新效果

    过滤器 过滤器是处于客户端与服务器资源文件之间的一道过滤网,在访问资源文件之前,通过一系列的过滤器对请求进行修改.判断等,把不符合规则的请求在中途拦截或修改.也可以对响应进行过滤,拦截或修改响应. 下面通过代码给大家介绍Vue filter 过滤当前时间 实现实时更新,具体代码如下所示: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <

  • vue 2.1.3 实时显示当前时间,每秒更新的方法

    如下所示: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Vue</title> </head> <body> <div id="app"> {{date}} </div> <!-- 开发环境版本,包含了用帮助的命令行警告 --> <script src=&

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

    1. 实现代码 <template> <div> {{nowDate}}{{nowWeek}}{{nowTime}} </div> </template> <script> export default { data(){ return { nowDate: "", // 当前日期 nowTime: "", // 当前时间 nowWeek: "" // 当前星期 } }, methods

  • vue中beforeRouteLeave实现页面回退不刷新的示例代码

    vue中beforeRouteLeave实现页面回退不刷新的示例代码

    路由切换返回前一个路由时实现页面不刷新功能,首先想到的是keep-alive,但是页面不属于父子级关系,所以决定用beforeRouteLeave,下面贴代码 beforeRouteLeave(to, from, next){ if(to.name !== 'page2'){ //判断是从哪个路由过来的,如果不是page2过来的需要做什么操作在这里实现 //如果是page2过来的,表明当前页面不需要刷新获取新数据,直接用之前缓存的数据即可 } next(); } beforeRouteLeave

  • C++中获取UTC时间精确到微秒的实现代码

    在日常开发过程中经常会使用到时间类函数的统计,其中获取1970年至今的UTC时间是比较常使用的,但是在windows下没有直接能够精确到微妙级的函数可用.本文提供方法正好可以解决这类需求问题. 下面先给出C++实现代码: 复制代码 代码如下: #ifndef UTC_TIME_STAMP_H_#define UTC_TIME_STAMP_H_ #include <windows.h>#include <sys/timeb.h>#include <time.h> #if

  • vue实现右上角时间显示实时刷新

    vue实现右上角时间显示实时刷新

    本文实例为大家分享了vue实现右上角时间显示实时刷新的具体代码,供大家参考,具体内容如下 效果图 utils文件夹下的index.js export default { // 获取右上角的时间戳 formatDate(time) { let newTime = ""; let date = new Date(time); let a = new Array("日","一","二","三","四&q

  • 在vue中获取token,并将token写进header的方法

    需要准备的东西:Vue+axios+Vuex+Vue-router 1.在login.vue中通过发送http请求获取token //根据api接口获取token var url = this.HOST + "/session"; this.$axios.post(url, { username: this.loginForm.username, password: this.loginForm.pass }).then(res => { // console.log(res.d

  • 详解pyqt5的UI中嵌入matplotlib图形并实时刷新(挖坑和填坑)

    一.pyqt5的UI中嵌入matplotlib的方法 1.导入模块 导入模块比较简单,首先声明使用pyqt5,通过FigureCanvasQTAgg创建画布,可以将画布的图像显示到UI,相当于pyqt5的一个控件,后面的绘图就建立在这个画布上,然后把这个画布当中pyqt5的控件添加到pyqt5的UI上,其次要导入matplotlib.figure的Figure ,这里要注意的是matplotlib.figure中的Figure,不是matplotlib.pyplot模块中的Figure,要区分清

  • vue中实现当前时间echarts图表时间轴动态的数据(实例代码)

    代码如下所示: <!-- ! 废话不多说,直接看代码吧 ! --> <template> <div class=""> <div class="chart" ref="ref_chart" style="width:370px;height:250px;"> </div> </div> </template> <script lang=&

  • 在JSP页面中获取当前日期时间的方法

    1. <SCRIPT LANGUAGE="JavaScript"> var myDate = new Date(); myDate.getYear(); //获取当前年份(2位) myDate.getFullYear(); //获取完整的年份(4位,1970-????) myDate.getMonth(); //获取当前月份(0-11,0代表1月) myDate.getDate(); //获取当前日(1-31) myDate.getDay(); //获取当前星期X(0-6,

  • vue中获取滚动table的可视页面宽度调整表头与列对齐(每列宽度不都相同)

    mounted() { // 在mounted中监听表格scroll事件 this.$refs.scrollTable.addEventListener( 'scroll',(event) => { this.adjustTable(event); }); }, ...... // target中的属性很多,可以通过控制台查看--clientWidth可以获取除滚动条外的可视区域宽度 adjustTable(event) { this.clientWidth = event.target.cli

随机推荐