Question

我正在使用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>

Answer 1

正如@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>

Answer 2

这是一个反应性问题。 Vue不会监视/绑定对moment对象的方法调用。

您需要将日期操作的结果分配回您的date属性。您还需要克隆moment实例，以使其显示为新值而不是同一实例。

setInterval(() => {
  this.date = this.date.clone().subtract(1, 'seconds')
}, 1000)

Answer 3

here is example of count down using VUE with moment

<script>
new Vue({
el: '#app',
data: {
message: 'Current Time:',
currentTime: null },

methods: {
updateCurrentTime: function updateCurrentTime() {
  this.currentTime = moment().format('LTS');
} },

created: function created() {var _this = this;
this.currentTime = moment().format('LTS');
setInterval(function () {return _this.updateCurrentTime();}, 1 * 1000);
} });

</script>
<section id="app" class="section">
<h3 class="title is-3 shadow" v-text="message"></h3>
<p class="time shadow" v-text="currentTime"></p>
</section>

<style> 
body, html {
width: 100%;
height: 100%; 
}

body {
background: -webkit-linear-gradient(LightSteelBlue, LightSalmon);
background: -o-linear-gradient(LightSteelBlue, LightSalmon);
background: -moz-linear-gradient(LightSteelBlue, LightSalmon);
background: linear-gradient(LightSteelBlue, LightSalmon); 
}

section.section {
display: flex;
flex-direction: column;
align-items: center;
padding-top: 140px;
background: transparent;
}

h3.is-3, p.time {
color: white;
}

h3.is-3:not(:last-child) {
margin: 0;
padding: 0;
}

.time {
font-size: 7em;
}

.shadow {
text-shadow: 0 0 15px rgba(100, 100, 100, 0.35);

</style>

带有momentjs的VueJS的倒计时组件

here is a reference link

这只是不使用矩的示例而已

// get next Sunday
var nextSunday = moment().day(7).format("YYYY-MM-DDT11:00:00Z");

// make it a moment object again
var event = moment(nextSunday);

// get current time/date
var current = moment();

// get difference between event and current
var diffTime = event.diff(current);

// let moment.js make the duration out of the timestamp
var duration = moment.duration(diffTime, 'milliseconds', true);

// set interval to milliseconds
var interval = 1000;

setInterval(function(){
  duration = moment.duration(duration - interval, 'milliseconds');
  $('#clock').html(
      "<div class=\'days cell\'>"+duration.days()+"<span>days</span></div>" +
      "<div class=\'hours cell\'>"+duration.hours()+"<span>hours</span></div>" +
      "<div class=\'mins cell\'>"+duration.minutes()+"<span>mins</span></div>" +
      "<div class=\'secs cell\'>"+duration.seconds()+"<span>secs</span></div>")
}, interval);

$section-color: #343436;
body {
  background-color: #1d1f20;
  color: #99999d;
}
body * {
  box-sizing: border-box;
}

#clock {
  width: 80%;
  margin: 10em auto;
  text-align: center;
  transform: scale(0.8);
}
#clock .cell {
  display: inline-block;
  width: 80px;
  height: 60px;
  background-color: #1b1b1c;
  position: relative;
  border-radius: 5px;
  margin-right: 5px;
  font-size: 3rem;
  padding-top: 2px;
}
#clock .cell span {
  position: absolute;
  left: 0;
  bottom: -30px;
  clear: both;
  text-align: center;
  text-transform: uppercase;
  width: 80px;
  height: 20px;
  font-size: 10px;
}

body {
  background-color: #1d1f20;
  color: lighten($section-color, 40%);
  
  * {
    box-sizing: border-box;
  }
}

#clock {
  width: 80%;
  margin: 10em auto;
  text-align: center;
  transform: scale(.8);
  

}
  .cell {
    display: inline-block;
    width: 80px;
    height: 60px;
    background-color: darken($section-color, 10%);
    position: relative;
    border-radius: 5px;
    margin-right: 5px;
    font-size: 3rem;
    padding-top: 2px;
    color:white;
  }
  .cell span {
    position: absolute;
    left: 0;
    bottom: -30px;
    clear: both;
    text-align: center;
    text-transform: uppercase;
    width: 80px;
    height: 20px;
    font-size: 10px;
   color:white;
  }
}

 <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment.min.js'></script>

<div id="clock"></div>

<div style= "color:white;" id="countdown">

</div>

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

3 个答案: