开箱即用——vue页面日期显示

效果图

method:

/**
*处理时间
*/
handleTimes(){
    const week = new Date().getDay()
    this.year = new Date().getFullYear()
    // 月份要+1
    this.month = new Date().getMonth() +1
    const date = new Date().getDate()
    this.date = date<10?('0'+ date): date
    // 星期几转大写
    this.week = '星期'+['日'， '一'， '二'， '='，'四'，'五'，'六'][week]
    // 一天不同时间段显示不同背景图片
    const hour = new Date().getHours()
   if (hour >= 5 && hour <= 18){
         this.showBg = require( ' ../ ../assets/common/portal/morning.png')
    } else {
          this.showBg = require( ' ../ ../assets/common / portal/evening.png ')
    }
    const documentItem = document.getElementById('box')
    documentItem.style.backgroundImage = "url(" + this.showBg + ")"
},

调用

mounted( {
this.handleTimes()
this.timer = setInterval(this.handleTimes，150000) ;
}

销毁周期函数

beforeDestroy( {
clearInterval(this.timer);
}

如果是显示到时分秒的话，获取时分秒

this.hour= new Date().getHours()<10?('0'+ new Date().getHours()): new Date().getHours()
this.getMinutes= new Date().getMinutes()<10?('0'+ new Date().getMinutes()): new Date().getMinutes()
this.getSeconds= new Date().getSeconds()<10?('0'+ new Date().getSeconds()): new Date().getSeconds()
周期函数间隔改为1000（1秒）