如何从 momentjs
为用户实时更新相对时间?
我计算过:
computed: {
ago() {
return moment().fromNow();
},
}
当我在组件中使用这个时:
<span class="text-muted pr-2" v-text="ago"></span>
我得到静态文本:几秒钟前
,如何在不重新加载页面的情况下更新此文本?我想看:一分钟前
,两分钟前
等。
如何为用户实时执行此操作?
最佳答案
因为 moment().fromNow()
不是响应式(Reactive)的,所以你不会看到任何变化,为了解决这个问题,我们修复了一个应该在 created< 中初始化的旧时间属性
hook this.oldTime = new Date();
,并根据我们的旧时间属性设置一个 1s 的时间间隔调用 moment(this.old).fromNow();
更新我们的属性 ago
。
// ignore the following two lines, they just disable warnings in "Run code snippet"
Vue.config.devtools = false;
Vue.config.productionTip = false;
new Vue({
el: '#app',
data() {
return {
ago: '',
oldTime: '',
interval:null
}
},
destroyed(){
clearInterval(this.interval)
},
created() {
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" >
{{ago}}
</span>
</div>
基于@Badgy 的评论:
How would you handle it for a v-for where you show it in the UI via a function? I thought about attaching it to the message object on created and update all message objects every x seconds but not sure if its the best way
为了适应这种情况,我们应该创建一个时间间隔来更新每条消息的 ago
属性:
// ignore the following two lines, they just disable warnings in "Run code snippet"
Vue.config.devtools = false;
Vue.config.productionTip = false;
new Vue({
el: '#app',
data() {
return {
messages: [{
content: 'Hello !',
time: '2019-09-10 00:08'
},
{
content: 'Hello again!',
time: '2019-09-10 00:10'
}
],
interval:null
}
},
computed: {
msgs() {
return messages
}
},
destroyed(){
clearInterval(this.interval)
},
created() {
this.interval=setInterval(() => {
this.messages = this.messages.map(m => {
m.ago = moment(m.time).fromNow();
return m;
})
}, 1000)
}
});
.primary{
color:blue
}
<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">
<ul>
<li v-for="m in messages">{{m.content}} <span class="primary">{{m.ago}}</span></li>
</ul>
</div>
关于javascript - vue momentjs 实时更新相对时间,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54280249/