VUE3+Element plus 展示当前时间

qq_44915190

已于 2022-10-18 18:03:20 修改

阅读量1.2k

点赞数 1

分类专栏： VUE 文章标签：前端 vue

于 2022-10-18 16:11:41 首次发布

本文链接：https://blog.csdn.net/qq_44915190/article/details/127390691

版权

VUE 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

template内容

<template>
        <div class="rightTop" style="display:inline-flex;align-items: center;flex-direction: row-reverse;height: 100%;">
            <button style="width:80px;height:30px;color:white;background-color: #8b0202;border-radius:5px; border:none; margin-right: 25px;">
                退出交易
            </button>
            <button style="width:80px;height:30px;color:white;background-color: #8b0202;border-radius:5px; border:none;margin-left: 25%; margin-right: 25px;">
                修改密码
            </button>
            <span class="hidden-md-and-down" style="font-weight: bold;white-space: nowrap;">服务器时间:&nbsp;&nbsp;{{currentTime}}</span>
        </div>
    </div>
</template>

script内容

export default {
        data() {
            return {
                timer: "",//定义一个定时器的变量
                currentTime: '', // 获取当前时间
            }
        },
        created() {
            this.timer = setInterval(() => {
                var year = new Date().getFullYear();
                var month = this.appendZero(new Date().getMonth() + 1);
                var day = this.appendZero(new Date().getDate());
                var hour = this.appendZero(new Date().getHours());
                var minute = this.appendZero(new Date().getMinutes());
                var second = this.appendZero(new Date().getSeconds());
                //修改数据date
                this.currentTime = year + "-" + month + '-' + day + ' ' + hour + ':' + minute + ':' + second;
            }, 1000);

        },
        methods: {
            //时间过滤加0
            appendZero(obj) {
                if (obj < 10) {
                    return "0" + obj;
                } else {
                    return obj;
                }
            },
        },
        beforeUnmount() {
            if (this.timer) {
                clearInterval(this.timer); // 在Vue实例销毁前，清除我们的定时器
            }
        }
    }