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