Vue练习二十六:03_08_简易网页时钟

Demo 在线地址:
https://sx00xs.github.io/test/26/index.html
---------------------------------------------------------------
ide: vscode
文件格式:.vue
解析:(待补)

<template>
  <div id="app">
    <div class="clock">
      <span>{{hours}}</span>点<span>{{mins}}</span>分<span>{{secs}}</span>秒
    </div>
  </div>
</template>
<script>
import { setInterval } from 'timers';
export default {
  data:function(){
    return{
      hours:'',
      mins:'',
      secs:''
    }
  },
  methods:{
    getTimes(){
      var date=new Date();
      this.hours=this.format( date.getHours());
      this.mins=this.format(date.getMinutes());
      this.secs=this.format(date.getSeconds());
    },
    format(a){
      return a.toString().replace(/^(\d)$/,'0$1');
    }
  },
  created(){
    this.getTimes();
  },
  mounted(){
    setInterval(this.getTimes,1000);
  }
}
</script>

 

posted @ 2019-07-29 19:58  sx00xs  阅读(161)  评论(0编辑  收藏  举报