Vue中持续获取当前时间

最新推荐文章于 2023-10-28 22:30:10 发布

前端--曹鹏博

最新推荐文章于 2023-10-28 22:30:10 发布

阅读量283

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/m0_68427221/article/details/127925531

版权

<template>

    <div>

        <div class="time">当前时间是：{{nowTime}} </div>

    </div>

</template>

<script>

    export default {
        data() {
            return {
                nowTime: ''

            }

        },

        mounted () {
            this.currentTime()          

        },

        methods: {
            currentTime() {
              setInterval(this.startGetNowTime, 1000);

            },

            startGetNowTime() {
                let time =new Date()

                var y =time.getFullYear()

                var M = (time.getMonth() + 1 < 10? "0" + (time.getMonth() + 1): time.getMonth() + 1) ;

                var d = (time.getDay() + 1<10?'0'+(time.getDay() + 1):time.getDay() + 1);

                var h = time.getHours(); //获取时

                var m = time.getMinutes(); //获取分

                var s = time.getSeconds(); //获取秒

                this.nowTime = y+'-'+M+'-'+d+'   '+h+'时'+m+'分'+s+'秒'

            }

        },

        // 销毁定时器

          beforeDestroy() {
             if (this.startGetNowTime) {
            clearInterval(this.startGetNowTime); // 在Vue实例销毁前，清除时间定时器

           }

       }

    }

</script>