vue如何動態(tài)獲取當(dāng)前時間
更新時間:2023年12月02日 14:52:26 作者:性野喜悲
這篇文章主要介紹了vue如何動態(tài)獲取當(dāng)前時間問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
vue動態(tài)獲取當(dāng)前時間
獲取當(dāng)前時間:
<template>
<div id="home">
<span class="deadline">截止{{ gettime }}</span>
</div>
</template>
<script>
export default {
name: "Home",
data() {
return {
gettime: "", //當(dāng)前時間
};
},
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)前時間
};
},
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)前時間
},
};
</script>
<style scoped>
</style>vue獲取當(dāng)前時間并時時刷新
頁面顯示
<div><span>{{nowDate}}</span><span class="houertime">{{hourDate}}</span></div>圖片上傳失敗?。。。?,我是分開年月日和時分秒,給時分秒加樣式
2022/11/24 18:30:20
data中定義變量和定時器
在created中放一個定時器,每秒讀取當(dāng)前時間一次,
在定時器之前先加載,否則會延遲一秒
data(){
return {
nowDate: null,
hourDate: null,
nowtimer: ''
}
},
created() {
this.gettime() // 如果不先調(diào)用一次的話,頁面顯示一秒后,時間才會顯示
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實例銷毀前,清除定時器
}
}總結(jié)
以上為個人經(jīng)驗,希望能給大家一個參考,也希望大家多多支持腳本之家。
您可能感興趣的文章:
- vue怎樣獲取當(dāng)前時間,并且傳遞給后端(不用注解)
- vue 使用moment獲取當(dāng)前時間及一月前的時間
- Vue 中如何利用 new Date() 獲取當(dāng)前時間
- 基于vue實現(xiàn)8小時帶刻度的時間軸根據(jù)當(dāng)前時間實時定位功能
- vue中實現(xiàn)當(dāng)前時間echarts圖表時間軸動態(tài)的數(shù)據(jù)(實例代碼)
- Vue 按照創(chuàng)建時間和當(dāng)前時間顯示操作(剛剛,幾小時前,幾天前)
- Vue 中獲取當(dāng)前時間并實時刷新的實現(xiàn)代碼
- Vue filter 過濾當(dāng)前時間 實現(xiàn)實時更新效果
- vue 2.1.3 實時顯示當(dāng)前時間,每秒更新的方法
- element-ui vue input輸入框自動獲取焦點聚焦方式
- Vue3新增時自動獲取當(dāng)前時間的操作方法
相關(guān)文章
vue項目中監(jiān)聽手機物理返回鍵的實現(xiàn)
這篇文章主要介紹了vue項目中監(jiān)聽手機物理返回鍵的實現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-01-01
Vue分別運用class綁定和style綁定通過點擊實現(xiàn)樣式切換
這篇文章主要為大家介紹了Vue分別運用class綁定和style綁定通過點擊實現(xiàn)樣式切換,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-07-07
vue3基礎(chǔ)組件開發(fā)detePicker日期選擇組件示例
這篇文章主要為大家介紹了vue3基礎(chǔ)組件開發(fā)-detePicker(日期選擇組件)示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-03-03
vue 實現(xiàn)強制類型轉(zhuǎn)換 數(shù)字類型轉(zhuǎn)為字符串
今天小編就為大家分享一篇vue 實現(xiàn)強制類型轉(zhuǎn)換 數(shù)字類型轉(zhuǎn)為字符串,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11

