vue moment.js及实时更新当前时间

一、引入moment

1.安装 cnpm install moment --save

2.import引入 import moment from 'moment'

3.设置moment区域为中国，引入：

import 'moment/locale/zh-cn'

moment.locale('zh-cn')

二、获取当前时间

<div>{{nowtime | updatetime}}</div>
<script>
    export default{
        data(){
            return{
                nowtime:new Date()
            }
        },
        filters:{
            updatetime:function(value){
                return moment(value).format('LTS');
            }
        }
    }
</script>    

其中moment().format('LTS')获取时间格式为：10:15:23类型

三、让时间实时更新

让时间实时更新用计时器，代码如下

mounted(){//生命周期模板挂载之后
    let _this=this;
    this.timer=setInterval(()=>{
        _this.nowtime=new Date();
    },1000)
},
beforeDestroy(){//生命周期实例销毁之前
    if(this.timer){
        clearInterval(this.timer);
    }
}  

这样就可以实现时间实时更新啦