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>
原文地址:https://www.cnblogs.com/sx00xs/p/11266121.html