vue获取当前时间并实时刷新时间

实现效果：

 

1. html展示时间
2. data中定义数据
3. 在created里设置定时器，重置时间格式
4. 在methods里写过滤小于10 的时候前面加0的方法

5. 在Vue实例销毁前，清除定时器

 

<div>
    <span>{{currentTime}}</span>
</div>

data() {
            return{
                timer: "",//定义一个定时器的变量
                currentTime: new Date(), // 获取当前时间
                
            }
        },

created() {
            var vm = this;
            vm.timer = setInterval(() => {
                    var y = new Date().getFullYear();
                    var m = vm.appendZero(new Date().getMonth() + 1);
                    var d = vm.appendZero(new Date().getDate());
                    var ho = vm.appendZero(new Date().getHours());
                    var mi = vm.appendZero(new Date().getMinutes());
                //修改数据date
                vm.currentTime = y + "/" + m + '/' + d + ' ' + ho + ':' + mi;
            }, 1000);
            
        },

methods: {
            //时间过滤加0
            appendZero(obj) {
                if (obj < 10) {
                    return "0" + obj;
                } else {
                    return obj;
                }
            },
        },

beforeDestroy() {
            if (this.timer) {
                clearInterval(this.timer); // 在Vue实例销毁前，清除我们的定时器
            }
        }