[Vue]显示当前时间

最新推荐文章于 2024-08-09 15:20:09 发布

iChangebaobao

最新推荐文章于 2024-08-09 15:20:09 发布

阅读量825

点赞数

分类专栏： Vue

本文链接：https://blog.csdn.net/iChangebaobao/article/details/100304631

版权

Vue 专栏收录该内容

74 篇文章 1 订阅

订阅专栏

<div>
	<span class="x-red">{{UserInfo.realName}}</span>！当前时间:{{NowTime | formatDate}}
</div>

<script>
        var app=new Vue({
            el:'#app',
            data:{
                UserInfo: {},
                NowTime:new Date(),

            },
            filters:{
                formatDate:function(value){
                	var date=new Date(value);
                    var year=date.getFullYear();
                    var month= date.getMonth() + 1;
                    var day= date.getDay()+1;
                    var hour= date.getHours();
                    hour=hour<10?('0'+hour):hour;
                    var minutes= date.getMinutes();
                    minutes=minutes<10?('0'+minutes):minutes;
                    var seconds= date.getSeconds();
                    seconds=seconds<10?('0'+seconds):seconds; 
                    return year+'年'+month+'月'+day+'日'+' '+hour + ':' + minutes+ ':' + seconds;
                }
            },
            mounted:function(){
                console.log("mount之后");  
                this.UserInfo = JSON.parse(sessionStorage.getItem("UserInfo"));
                // setInterval(()=>{
                //     this.NowTime=new Date();
                // })
                var _this = this;
                this.timer=setInterval(function(){ 
                    _this.NowTime=new Date();// 每隔1秒钟更新一次date
                },1000)
            },
            methods:{

            }, 
            destroyed :function() {
                if (this.timer) { 
                    clearInterval(this.timer) ;
                }
            }
        })
    </script>