vue实现获取当前日期时间并实时刷新

参考链接：https://www.cnblogs.com/zhao0831/p/12841652.html
功能需求：获取当前系统时间，在页面上显示:年月日时分秒，并且实时刷新，和系统时间保持一致
第一步：在data 里面声明变量

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 }}即可