zoukankan      html  css  js  c++  java
  • 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实例销毁前,清除我们的定时器
                }
            }
  • 相关阅读:
    smarty语法
    combobox里面显示checkbox
    requirejs打包项目
    datagrid中用tooltip
    combobox默认值为第一个数据,修改为空值
    easyui-textbox高为0
    C++并发编程 异步任务
    C++并发编程 互斥和同步
    C++并发编程 thread
    C++智能指针
  • 原文地址:https://www.cnblogs.com/meiyanstar/p/12894363.html
Copyright © 2011-2022 走看看