时间戳

首页 > 解决方案 > 使用 vue.js 和 moment.js 创建倒计时

javascript - 使用 vue.js 和 moment.js 创建倒计时

问题描述

我正在使用 vue.js 和 moment.js 创建一个计时器，我只使用分钟和秒，我的代码应该可以工作，但我没有得到想要的结果：

var app = new Vue({
  el: '#app',
  data: {
    date: moment(60 * 10 * 1000)
  },
  computed: {
    time: function(){
      return this.date.format('mm:ss');
    }
  },
  mounted: function(){
    var aa = this.date;
    
    setInterval(function(){
      aa.subtract(1, 'seconds');
    }, 1000);
  }
});
<script src="https://momentjs.com/downloads/moment.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>

<div id="app">{{ time }}</div>

标签： javascriptvue.jsmomentjs

解决方案

正如@Phil 指出的那样，该问题是由反应性问题引起的。subtract只需更新一些属性然后返回原始对象。

所以我们应该用一个新的对象来替换旧的。（可能存在一种使用Vue.set或vm.$set更新矩对象属性的方法，希望有人能指出。）

就像下面的演示：

var app = new Vue({
  el: '#app',
  data: {
    date: moment(60 * 10 * 1000)
  },
  computed: {
    time: function(){
      return this.date.format('mm:ss');
    }
  },
  mounted: function(){   
    setInterval(() => {
      this.date = moment(this.date.subtract(1, 'seconds'))
    }, 1000);
  }
});
<script src="https://momentjs.com/downloads/moment.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>

<div id="app">{{ time }}</div>

推荐阅读