vue中 实时时间控件

时间控件（组件化可直接导入使用）

• 效果图
  

<template>
  <div class="LoginClock">
    <div class="time">{ 
   { 
   time}}</div>
    <div class="date">{ 
   { 
   date}}</div>
  </div>
</template>

// An highlighted block
<script>
export default { 
   
  name: "LoginClock",
  data() { 
   
    return { 
   
      time: "--:--:--",
      date: "----.--.--",
      timer: ""
    };
  },
  methods: { 
   
    getTime(){ 
   
      let now = new Date(),
      _hour = now.getHours(),
      _minute = now.getMinutes(),
      _second = now.getSeconds(),
      _year = now.getFullYear(),
      _month = now.getMonth()+1,
      _day = now.getDate();
      _hour = _hour<10 ? '0'+_hour : _hour;
      _minute = _minute<10 ? '0'+_minute : _minute;
      _second = _second<10 ? '0'+_second : _second;
      _month = _month<10 ? '0'+_month : _month;
      _day = _day<10 ? '0'+_day : _day;
      this.time = _hour + ':' + _minute + ':' + _second;
      // this.time = _hour + ':' + _minute;
      this.date = _year + '.' + _month + '.' + _day;
    }
  },
  mounted() { 
   
    let self = this;
    self.timer = setInterval(()=>{ 
   
      self.getTime()
    },1000);
  },
  destroyed(){ 
   
    let self = this;
    clearInterval(self.timer);
  }
};
</script>

今天的文章vue中 实时时间控件分享到此就结束了，感谢您的阅读。