安装
npm install vue-clock2
例子 myclock.vue
<template>
<div class="time">
<clock :time="time"></clock>
</div>
</template>
<script>
import clock from 'vue-clock2';
export default {
components: {clock},
name: "myclock",
data() {
return {
time: '10:40'
}
},
methods: {
fun() {
let date = new Date();
let h = date.getHours();
h = h < 10 ? ('0' + h) : h;
let m = date.getMinutes();
m = m < 10 ? ('0' + m) : m;
let s = date.getSeconds();
s = s < 10 ? ('0' + s) : s;
this.time = h + ":" + m+":"+s;
}
},
mounted() {
window.setInterval(() => {
setTimeout(this.fun, 0)
}, 1000)
}
}
</script>
<style scoped>
.time{
height: 160px;
width: 100%;
}
.time >div{
margin-left: 50px;
margin-top: 5px;
}
</style>
效果图: