Html

<div id="app">
	<div class="time" v-if="house">{{house}}:{{minute}}:{{second}}</div>
</div>

以上代码需要引入以下文件：
<link rel="stylesheet" href="./index.css">
<script src="/node_modules/vue/dist/vue.js"></script>
<script src="./index.js"></script>

JavaScript

new Vue({
	el: "#app",
    data() {
        return {
            house: null,
            minute: null,
            second: null
        }
    },
    created() {
        setInterval(() => {
            let dateTime = new Date(),
                // yer = dateTime.getFullYear(),
                // moth = String(dateTime.getMonth() + 1),
                // day = dateTime.getDate().toString(),
                house = dateTime.getHours().toString(),
                minute = dateTime.getMinutes().toString(),
                second = dateTime.getSeconds().toString();

            // 补〇
            // moth = ('00' + moth).slice(moth.length);
            // day = ('00' + day).slice(day.length);
            house = ('00' + house).slice(house.length);
            minute = ('00' + minute).slice(minute.length);
            second = ('00' + second).slice(second.length);

            this.house = house;
            this.minute = minute;
            this.second = second;
        }, 1000);
    },
});

Style

* {
    margin: 0;
    padding: 0;
    font-family: 'Poppins', sans-serif;
}

html,
body {
    display: grid;
    height: 100%;
    place-items: center;
    background-color: #000;
}

.time {
    font-size: 50px;
    font-weight: 600;
    background: linear-gradient(135deg, #14ffe9, #ffeb3d, #ff00e0);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: animate 1.5s linear infinite;
}

@keyframes animate {
    100% {
        filter: hue-rotate(360deg);
    }
}

效果演示