vue倒计时实例代码

<template>
    <div>
        <!-- <Nav></Nav> -->
        <!-- 一级视图组件 -->
        <!-- <router-view></router-view> -->
        <h1>{{ year }}</h1>
        :
        <h1>{{ month }}</h1>
        :
        <h1>{{ hour }}</h1>
        :
        <h1>{{ minute }}</h1>
        :
        <h1>{{ second }}</h1>
    </div>
</template>

<script>
import dayjs from 'dayjs'
import duration from 'dayjs/plugin/duration'
dayjs.extend(duration)
import 'dayjs/locale/zh-cn'
dayjs.locale('zh-cn')
export default {
    data() {
        return {
            year: '',
            month: '',
            hour: '',
            minute: '',
            second: '',
        }
    },
    mounted() {
        // 倒计时
        var target = new Date(dayjs('2022-09-01 00:00:00').format()).getTime()
        function run() {
            const diffTime = dayjs.duration(target - dayjs())
            const day = diffTime.days() //天
            const hours = diffTime.hours() //小时
            const minutes = diffTime.minutes() //分钟
            const seconds = diffTime.seconds() //秒
            return `${day}天${hours}小时${minutes}分${seconds}秒`
        }
        setInterval(() => {
            console.log(run())
        }, 1000)

        // 当前时
        setInterval(() => {
            this.year = dayjs().year()
            this.month = dayjs().month()
            this.hour = dayjs().hour()
            this.minute = dayjs().minute()
            // 相差多少分钟
            // console.log(dayjs(target, 'minute'))
            this.second = dayjs().second()
        }, 1000)
    },
}
</script>

<style lang="scss" scoped>
</style>