vue获取当前时间并实时显示在页面

在需要显示的地方加上这行，可以根据自己的需求修改

<div><span>当前时间: {{newTime}} </span></div>

在data里面定义

data() {return {newTime: ""}
}

在mouted里加入以下代码

mounted(){this.getNowTime();//进入页面调用该方法获取当前时间clearInterval(myTimeDisplay );//销毁之前定时器var myTimeDisplay = setInterval(() => {this.getNowTime(); //每秒更新一次时间}, 1000);
},

最后再methods去写该方法

methods: {getNowTime() {var date = new Date();var time = date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate() + ' ' + date.getHours() + ':' + date.getMinutes() + ':' + date.getSeconds();this.newTime = time;},//根据自己的需求，看要不要在时间不大于10的时候在前面补0，如果需要直接this.addZero(date.getMinutes()),其它与之相同，如果不需要删掉addZero（）方法即可。//小于10的拼接上0字符串addZero(s) {return s < 10 ? ('0' + s) : s;},},

vue获取当前时间并实时显示在页面相关推荐

Vue过滤器的简单使用--实时显示格式化的时间
Vue的过滤器的使用是在{{}}插值的尾部添加一个管道符 | 过滤的规则是自己定义的,通过给Vue实例添加选项filters来设置通过过滤器对时间进行格式化从而实时显示时间 <!doctyp ...
学习使用微信小程序动态获取当前时间并实时跳动
学习使用微信小程序动态获取当前时间并实时跳动 1.修改util.js 2..js函数构造 3.wxml页面显示固定时间 1.修改util.js const formatTime = date => ...
vue获取当前时间并时时刷新
vue获取当前时间并时时刷新页面显示 <div><span>{{nowDate}}</span><span class="houertime&qu ...
opencv-python 实时获取摄像头数据并实时显示。
opencv-python 实时获取摄像头数据并实时显示. 目录 opencv-python 实时获取摄像头数据并实时显示. 代码: 一.关于 cv2.VideoCapture(source) 函数 ...
vue 获取系统时间
1.我的需求:vue中获取系统时间,精确到秒.赋值给一个对象,传给后台存储到数据库中. 2.代码: methods: {//获取系统时间函数timeFormat(timeStamp) {let yea ...
axios获取图片显示_vue中使用axios post上传头像/图片并实时显示到页面的方法
在前端开发中,为了更好的用户体验,在头像上传时会先将图片显示到页面然后点击保存按钮完成图片的上传成功代码部分有参考他人的写法. html代码: 请上传图片 js代码: //实时显示该图片在页面 g ...
vue 获取当前时间（并与演出时间对比做出状态改变）
vue 获取当前时间(并与演出时间对比做出状态改变) 功能需求: 演出预告页面内如果节目正在当前时间段进行,那么时间字段为绿色. 如果节目已结束,那么时间字段为灰色. 如果节目未开始,那么时间字段为 ...
Vue获取当前日期时间、获取指定时间的前、后多少天的日期
https://blog.csdn.net/ForeverBana/article/details/103472751 Vue获取当前日期 https://blog.csdn.net/weixin_ ...
vue获取当前时间和前一天时间_VUE 获取今天时间和一月前今天的时间
VUE 获取今天时间和一月前今天的时间这个场景是啥呢,就比如说一个图表,需要默认查取过去一个月的数据,所以说需要向后台传输两个参数,一个是开始时间,一个是结束时间.获取当前时间还好,一个月前的时间有 ...

vue获取当前时间并实时显示在页面

vue获取当前时间并实时显示在页面相关推荐

最新文章

热门文章