Vue momentjs 实时更新相对时间 [英] Vue momentjs update relative time in real time

问题描述

如何从 momentjs 为用户实时更新相对时间?

我已经计算过:

计算:{前(){返回时刻().fromNow();},}

当我在组件中使用时:

我得到静态文本:几秒钟前，如何在不重新加载页面的情况下更新此文本?我想看:一分钟前，两分钟前 e.t.c..

我如何为用户实时执行此操作?

解决方案

由于 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>

基于@Badgy 的评论:

<块引用>

如果你通过一个函数在 UI 中显示它，你会如何处理它?我想过将它附加到创建的消息对象并每 x 秒更新所有消息对象，但不确定它是否是最好的方法

为了适应这种情况，我们应该创建一个时间间隔来更新每条消息的 ago 属性:

//忽略下面两行，他们只是在运行代码片段"中禁用警告Vue.config.devtools = false;Vue.config.productionTip = false;新的 Vue({el: '#app',数据() {返回 {消息:[{内容:'你好！',时间:'2019-09-10 00:08'},{内容:'你好！',时间:'2019-09-10 00:10'}],间隔:空}},计算:{消息(){回消息}},销毁(){clearInterval(this.interval)},创建(){this.interval=setInterval(() => {this.messages = this.messages.map(m => {m.ago = moment(m.time).fromNow();返回 m;})}, 1000)}});

.primary{颜色:蓝色}

<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>

How I can do update relative time from momentjs in real time for user?

I have computed:

computed: {
  ago() {
     return moment().fromNow();
    },
}

And when I use in component this:

<span class="text-muted pr-2" v-text="ago"></span>

I get static text: a few seconds ago, how update this text without page reloading? I want see: a minute ago, a two minutes ago e.t.c..

How I can do this in real time for user?

解决方案

Since moment().fromNow() isn't reactive so you will not see any change,to deal with we fix an old time property which should be initialized in the created hook this.oldTime = new Date();, and set a time interval with 1s, based on the old time property we call moment(this.old).fromNow(); to update our property 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>

Based on the comment of @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

to fit to this situation we should create a time interval in which we update the ago property of each message :

// 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>

这篇关于Vue momentjs 实时更新相对时间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！