且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

Vue momentjs 实时更新相对时间

更新时间:2023-02-23 17:16:52

由于 moment().fromNow() 不是响应式的,所以你不会看到任何变化,为了处理我们修复了应在created 钩子中初始化的旧时间属性this.oldTime = new Date();,并用1s,基于我们调用 moment(this.old).fromNow(); 的旧时间属性来更新我们的属性 之前.

//忽略下面两行,他们只是在运行代码片段"中禁用警告Vue.config.devtools = false;Vue.config.productionTip = false;新的 Vue({el: '#app',数据() {返回 {以前:'',过去: '',间隔:空}},销毁(){clearInterval(this.interval)},创建(){this.oldTime = new Date();this.interval=setInterval(() => {this.ago = moment(this.oldTime).fromNow();}, 1000)}});

<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css"/><script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script><script src="https://rawgit.com/moment/moment/2.2.1/min/moment.min.js"></script><div id="app" class="container"><span class="text-muted pr-2" >{{前}}</span>