vue 实现计时器组件

结果图：

v-if 和 v-show 的区别

总结来说v-if是在不断的销毁和重建，v-show 只是改变 display 属性，元素依然存在 dom 中。v-if 切换开销大，v-show 初始化开销大

time.vue代码

<template>
    <div>
        <Span v-if="hour < 10">{{ "0" + hour }}:</Span>
        <Span v-else>{{ hour }}:</Span>
        <Span v-if="min < 10">{{ "0" + min }}:</Span>
        <Span v-else>{{ min }}:</Span>
        <Span v-if="second < 10">{{ "0" + second }}</Span>
        <Span v-else>{{ second }}</Span>
    </div>
</template>

<script>
export default {
    name: "Time",
    data() {
        return {
            second: 0,
            min: 0,
            hour: 0,
        };
    },
    mounted() {
        let time = setInterval(() => {
            this.second += 1;
            if (this.second >= 60) {
                this.second = 0;
                this.min += 1;
            }
            if (this.min >= 60) {
                this.min = 0;
                this.hour += 1;
            }
        }, 1000);
    },
};
</script>