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

可乐西瓜冰

已于 2022-09-01 11:10:56 修改

阅读量7.2k

点赞数 16

文章标签： vue.js javascript 前端

于 2022-09-01 11:09:33 首次发布

本文链接：https://blog.csdn.net/qq_49012497/article/details/126639097

版权

前端开发 Vue.js 实时时间数据绑定定时器

关键词由CSDN通过智能技术生成

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

<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;
        },
        
    },