我如何为用户实时更新相对时间从momentjs？
我计算过:
computed: {
ago() {
return moment().fromNow();
},
}
当我在这个组件中使用时:
<span class="text-muted pr-2" v-text="ago"></span>
我得到静态文本:a few seconds ago，如何在不重新加载页面的情况下更新此文本？我想看看:a minute ago，two minutes ago e.t.c..
我如何为用户实时完成这项工作？
由于moment().fromNow()不是react 性的，所以你不会看到任何变化，为了解决这个问题，我们修复了一个旧的时间属性，它应该在created hook 102中初始化，并将时间间隔设置为1s，基于旧的时间属性，我们调用103来更新我们的属性104.
// 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的 comments :
101
为了适应这种情况，我们应该创建一个时间间隔，更新每条消息的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>