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>

浙公网安备 33010602011771号