vue如何動(dòng)態(tài)獲取當(dāng)前時(shí)間
vue動(dòng)態(tài)獲取當(dāng)前時(shí)間
獲取當(dāng)前時(shí)間:
<template> <div id="home"> <span class="deadline">截止{{ gettime }}</span> </div> </template> <script> export default { name: "Home", data() { return { gettime: "", //當(dāng)前時(shí)間 }; }, methods: { getTime() { var _this = this; let yy = new Date().getFullYear(); var mm = new Date().getMonth() > 9 ? new Date().getMonth() + 1 : new Date().getMonth() == 9 ? new Date().getMonth() + 1 : '0' + (new Date().getMonth() + 1); var dd = new Date().getDate() < 10 ? '0' + new Date().getDate() : new Date().getDate(); let hh = new Date().getHours(); let mf = new Date().getMinutes() < 10 ? '0' + new Date().getMinutes() : new Date().getMinutes(); let ss = new Date().getSeconds() < 10 ? '0' + new Date().getSeconds() : new Date().getSeconds(); _this.gettime = yy + '-' + mm + '-' + dd + ' ' + hh + ':' + mf + ':' + ss; }, currentTime() { setInterval(this.getTime, 1000); }, }, mounted() { this.currentTime(); }, }; </script> <style scoped> </style>?
獲取當(dāng)前日期:
<template> <div id="home"> <span class="deadline">當(dāng)前日期{{ sendTime }}</span> </div> </template> <script> export default { name: "Home", data() { return { sendTime: "", //當(dāng)前時(shí)間 }; }, mounted() { this.format(); }, methods: { format() { const nowDate = new Date(); const date = { year: nowDate.getFullYear(), month: nowDate.getMonth() + 1, date: nowDate.getDate(), } const newmonth = date.month > 9 ? date.month : '0' + date.month const day = date.date > 9 ? date.date : '0' + date.date this.sendTime = date.year + '.' + newmonth + '.' + day }, //獲取當(dāng)前時(shí)間 }, }; </script> <style scoped> </style>
vue獲取當(dāng)前時(shí)間并時(shí)時(shí)刷新
頁面顯示
<div><span>{{nowDate}}</span><span class="houertime">{{hourDate}}</span></div>
圖片上傳失敗?。。?!,我是分開年月日和時(shí)分秒,給時(shí)分秒加樣式
2022/11/24 18:30:20
data中定義變量和定時(shí)器
在created中放一個(gè)定時(shí)器,每秒讀取當(dāng)前時(shí)間一次,
在定時(shí)器之前先加載,否則會延遲一秒
data(){ return { nowDate: null, hourDate: null, nowtimer: '' } }, created() { this.gettime() // 如果不先調(diào)用一次的話,頁面顯示一秒后,時(shí)間才會顯示 this.nowtimer = setInterval(this.gettime, 1000); }, methods: { gettime() { this.nowDate = new Date().toLocaleString('zh', { year: 'numeric', month: 'numeric', day: 'numeric' }) this.hourDate = new Date().toLocaleString('zh', { hour: 'numeric', minute: 'numeric', second: 'numeric' }) } },
最后進(jìn)行銷毀
beforeDestroy () { if (this.nowDate && this.hourDate) { clearInterval(this.nowDate, this.hourDate) // 在Vue實(shí)例銷毀前,清除定時(shí)器 } }
總結(jié)
以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
- vue怎樣獲取當(dāng)前時(shí)間,并且傳遞給后端(不用注解)
- vue 使用moment獲取當(dāng)前時(shí)間及一月前的時(shí)間
- Vue 中如何利用 new Date() 獲取當(dāng)前時(shí)間
- 基于vue實(shí)現(xiàn)8小時(shí)帶刻度的時(shí)間軸根據(jù)當(dāng)前時(shí)間實(shí)時(shí)定位功能
- vue中實(shí)現(xiàn)當(dāng)前時(shí)間echarts圖表時(shí)間軸動(dòng)態(tài)的數(shù)據(jù)(實(shí)例代碼)
- Vue 按照創(chuàng)建時(shí)間和當(dāng)前時(shí)間顯示操作(剛剛,幾小時(shí)前,幾天前)
- Vue 中獲取當(dāng)前時(shí)間并實(shí)時(shí)刷新的實(shí)現(xiàn)代碼
- Vue filter 過濾當(dāng)前時(shí)間 實(shí)現(xiàn)實(shí)時(shí)更新效果
- vue 2.1.3 實(shí)時(shí)顯示當(dāng)前時(shí)間,每秒更新的方法
- element-ui vue input輸入框自動(dòng)獲取焦點(diǎn)聚焦方式
- Vue3新增時(shí)自動(dòng)獲取當(dāng)前時(shí)間的操作方法
相關(guān)文章
vue 百度地圖(vue-baidu-map)繪制方向箭頭折線實(shí)例代碼詳解
這篇文章主要介紹了vue 百度地圖(vue-baidu-map)繪制方向箭頭折線,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-04-04關(guān)于Vue?ui?的沒反應(yīng)、報(bào)錯(cuò)問題解決總結(jié)
這篇文章主要介紹了關(guān)于Vue?ui?的沒反應(yīng)、報(bào)錯(cuò)問題解決總結(jié),具有很好的參考價(jià)值,希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-09-09vue下載excel的實(shí)現(xiàn)代碼后臺用post方法
這篇文章主要介紹了vue下載excel的實(shí)現(xiàn)代碼,后臺用post方法,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下2019-05-05