vue的時鐘插件

安裝

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>

效果圖：