效果圖如下：

vue3新寫法是非常簡單，代碼如下：

<div>頁面顯示</div>

?<div class="dateclass">

? ? ? <div>{{ getHours }}</div>

? ? ? <div>{{ getMinutes }}</div>

? ? ? <div>{{ getSeconds }}</div>

? ? </div>

//獲取時(shí)間

const dat = ref(new Date())

//分別獲取自己需要的東西，時(shí)分秒，年月日等，這里只有時(shí)分秒

const getHours = ref(dat.value.getHours())

const getMinutes = ref(dat.value.getMinutes())

const getSeconds = ref(dat.value.getSeconds())

//最后一個(gè)定時(shí)器，解決。有個(gè)小缺陷，但是我不想改

setInterval(() => {

? //秒

? if (getSeconds.value == 59) {

? ? getSeconds.value = 0

? ? //分

? ? if (getMinutes.value == 59) {

? ? ? getMinutes.value = 0

? ? ? //時(shí)

? ? ? if (getHours.value == 23) {

? ? ? ? getHours.value = 0

? ? ? } else {

? ? ? ? getHours.value += 1

? ? ? }

? ? } else {

? ? ? getMinutes.value += 1

? ? }

? } else {

? ? getSeconds.value += 1

? }

}, 1000)

總結(jié)

以上是生活随笔為你收集整理的vue3 + ts + vite 动态显示时间的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。