基于Vue的前端界面實(shí)現(xiàn)日期時間實(shí)時顯示簡單代碼
更新時間：2024年01月10日 14:47:51 作者：Xxxiostream
今天在項(xiàng)目中有一個功能是要求顯示北京的實(shí)時時間,下面這篇文章主要給大家介紹了關(guān)于如何基于Vue的前端界面實(shí)現(xiàn)日期時間實(shí)時顯示的相關(guān)資料,需要的朋友可以參考下
1.開發(fā)過程中有很多場景需要在界面上實(shí)時顯示日期時間。本文介紹一種簡單的實(shí)現(xiàn)方法。
下圖1.1為效果圖
圖1.1
2.實(shí)現(xiàn)方法。首先在data里面聲明一個變量curretime，并引入到頁面中。如圖2.1所示
圖2.1
3.在methods里定義一個方法，實(shí)例代碼附下：
updateTime() {<!--{C}%3C!%2D%2D%20%2D%2D%3E-->
const now = new Date();
this.currentTime = now.getFullYear() + “年” +
(now.getMonth() + 1) + “月” +
now.getDate() + "日 " +
now.toLocaleTimeString();
}
4.隨后在mounted中通過定時器不斷調(diào)用該方法即可，代碼附下：
setInterval(() => {<!--{C}%3C!%2D%2D%20%2D%2D%3E-->
this.updateTime();
}, 1000);
總結(jié)
到此這篇關(guān)于基于Vue的前端界面實(shí)現(xiàn)日期時間實(shí)時顯示的文章就介紹到這了,更多相關(guān)Vue日期時間實(shí)時顯示內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Vue3路由高級玩法實(shí)戰(zhàn)指南從模塊化到企業(yè)級實(shí)踐
VueRouter4通過一系列改進(jìn),提升了對復(fù)雜應(yīng)用的支持,核心變化包括更現(xiàn)代的創(chuàng)建方式、更靈活的動態(tài)路由和守衛(wèi)系統(tǒng),文章還探討了模塊化路由管理、權(quán)限控制、懶加載、動畫以及企業(yè)級實(shí)踐,強(qiáng)調(diào)了在實(shí)際項(xiàng)目中靈活應(yīng)用這些特性的重要性,感興趣的朋友跟隨小編一起看看吧2026-03-03
Vue Form表單的使用方法(rules格式校驗(yàn)網(wǎng)絡(luò)校驗(yàn)鍵盤按鍵監(jiān)聽)
本文介紹了在Vue.js中使用表單校驗(yàn)規(guī)則（rules）進(jìn)行網(wǎng)絡(luò)請求校驗(yàn)的方法,以及如何通過formRef引用表單對象并進(jìn)行鍵盤按鍵監(jiān)聽,感興趣的朋友跟隨小編一起看看吧2024-11-11
Vue+Microapp實(shí)現(xiàn)微前端的示例詳解
這篇文章主要為大家詳細(xì)介紹了如何實(shí)現(xiàn)以vite+vue3+Microapp為主應(yīng)用，以vue2+element為子應(yīng)用的微前端，感興趣的小伙伴快跟隨小編一起學(xué)習(xí)一下吧2023-06-06
這篇文章主要介紹了Vue3組件的開發(fā)，上一篇文章我們價紹了Vue3（三）網(wǎng)站首頁布局開發(fā)，今天繼續(xù)上篇內(nèi)容展開組件的開發(fā),需要的朋友可以參考一下2021-11-11
Vue完整項(xiàng)目構(gòu)建(進(jìn)階篇)
這篇文章主要介紹了Vue完整項(xiàng)目構(gòu)建(進(jìn)階篇)的相關(guān)資料,需要的朋友可以參考下2018-02-02
vue.js 解決v-model讓select默認(rèn)選中不生效的問題
這篇文章主要介紹了vue.js 解決v-model讓select默認(rèn)選中不生效的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
今天小編就為大家分享一篇Vue2實(shí)時監(jiān)聽表單變化的示例講解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
有時候我們使用el-table的選擇框時,如果涉及修改、刪除時,可能一次只允許用戶選擇一條,這樣的話如果使用頂部的全選復(fù)選框就不合適了,這篇文章主要給大家介紹了關(guān)于el-table表頭全選框隱藏或禁用設(shè)置的相關(guān)資料,需要的朋友可以參考下2023-09-09
Monaco-editor,一個vs?code?編輯器,這篇文章主要為大家詳細(xì)介紹了如何在Vue2中使用Monaco?Editor,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-01-01
路由跳轉(zhuǎn)的同時傳遞參數(shù)是比較常見的,下面這篇文章主要給大家介紹了關(guān)于vue3路由配置以及路由跳轉(zhuǎn)傳參的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-04-04