vue获取当前时间和前一天时间_vue实现获取当前日期时间并实时刷新

功能需求：获取当前系统时间，在页面上显示:年月日时分秒，并且实时刷新，和系统时间保持一致

第一步：在deta 里面声明变量

data() {

return {

nowDate:null,    //存放年月日变量

nowTime:null,   //存放时分秒变量

timer: "",           //定义一个定时器的变量

currentTime: new Date(),       // 获取当前时间

}

},

第二步：定义获取日期时间方法getTime,并在created() 生命周期里面调用，在实例创建前调用

created() {

this.timer = setInterval(this.getTime, 1000);

},

方法getTime如下:

methods: {

getTime(){

const date = new Date();

const year = date.getFullYear();

const month = date.getMonth() + 1;

const day = date.getDate();

const hour= date.getHours();

const minute = date.getMinutes();

const second = date.getSeconds();

const str = ''

if(this.hour>12) {

this.hour -= 12;

this.str = " AM";

}else{

this.str = " PM";

}

this.month=check(month);

this.day=check(day);

this.hour=check(hour);

this.minute=check(minute);

this.second=check(second);

function check(i){

const num = (i<10)?("0"+i) : i;

return num;

}

this.nowDate = year + "年" + this.month + "月" + this.day+"日";

this.nowTime = this.hour + ":" + this.minute + ":" + this.second + this.str;

},

}

第三步：离开页面使用beforeDestroy() 销毁

beforeDestroy() {

if (this.timer) {

clearInterval(this.timer); // 在Vue实例销毁前，清除定时器

}

},

第四步：在页面需要显示的地方绑定{{ nowDate }},{{ nowTime }}即可