如何在 vue js html 中将到期时间显示为报价的计时器？

Question

我的json数据是

{"status": true, "data": [{"offerId": 1, "postId": 81, "offer": "/offer/1517551392.618297_27073223_1691256130913694_2670312265146991358_n.jpg", "expiry": "2018-02-08T00:00:00Z"}, {"offerId": 4, "postId": 81, "offer": "/offer/1519618809.4734359_1.jpg", "expiry": "2018-03-01T00:00:00Z"}, {"offerId": 2, "postId": 79, "offer": "/offer/1519025622.8130004_Screenshot_21.png", "expiry": "2018-02-03T00:00:00Z"}, {"offerId": 3, "postId": 79, "offer": "/offer/1519026074.7614043_Screenshot_26.png", "expiry": "2018-03-01T00:00:00Z"}]}

这些是我加载的报价。因此，每个报价都有一个到期日。使用此过期数据和当前日期和时间，我需要显示一个计时器，以天、小时、分钟、秒为单位显示过期时间。

我怎样才能计算出相同的值。

我的vue js代码是

offers = new Vue({
    el: '#offers',
    data: {
        offer: {},
    },

mounted() { 
 var self = this; .
dat: {},
 $.ajax({ 
 url: "http://127.0.0.1:8000/alpha/get/offers/", 
  data: data,
type: "POST",
dataType: 'json', 
 success: function (e) { 
 if (e.status == 1) { 
self.offer = e.data;
            }
            },
        });
 }
    },

所以，我需要使用到期时间和当前日期和时间来实现一个计时器。请帮助我找到相同的解决方案。我的 js 代码很弱，请帮我解决同样的问题？

我的html密码是

<div v-for="ofr in offer">
{{ofr.expiry}}
</div>

当我使用这个时，我可以加载到期时间，而不是这个，我怎么能显示一个显示剩余时间的计时器？

Answer 1

这个问题有点棘手，但我想出了这个解决方案。这可能不是最好的，但它确实有效。

后备方法是我在数组中添加了额外的数据，即 expryTime 将在您的 v-for 迭代中调用。我为每个数据设置 1 sec 间隔以刷新，因此每 1 秒调用 getExpiryCounter 方法来更新到期计数器。

检查并尝试以下代码段：

var offers = new Vue({
  el: '#offers',
  data: {
    offer: [],
  },
  methods: {
    getExpiryCounter: function() {
      for (var idx in this.offer) {
        var timer = new Date(this.offer[idx].expiry).getTime() - new Date().getTime();
        // get day
        var day = timer / 1000 / 60 / 60 / 24;
        // get hour
        var hour = (day % 1) * 24;
        // get min
        var min = (hour % 1) * 60;
        // get sec
        var sec = (min % 1) * 60;

        var appndDate = Math.floor(day) + 'D ' + Math.floor(hour) + 'H ' + Math.floor(min) + 'M ' + Math.floor(sec) + 'S '

        if (timer < 0) {
          Vue.set(this.offer[idx], 'expryTime', 'Expired!');
        } else {
          Vue.set(this.offer[idx], 'expryTime', appndDate);
        }
      }
    }
  },
  mounted: function() {
    this.offer = [{
      "offerId": 1,
      "postId": 81,
      "offer": "/offer/1517551392.618297_27073223_1691256130913694_2670312265146991358_n.jpg",
      "expiry": "2018-02-08T00:00:00Z"
    }, {
      "offerId": 4,
      "postId": 81,
      "offer": "/offer/1519618809.4734359_1.jpg",
      "expiry": "2018-03-01T00:00:00Z"
    }, {
      "offerId": 2,
      "postId": 79,
      "offer": "/offer/1519025622.8130004_Screenshot_21.png",
      "expiry": "2018-02-03T00:00:00Z"
    }, {
      "offerId": 3,
      "postId": 79,
      "offer": "/offer/1519026074.7614043_Screenshot_26.png",
      "expiry": "2018-03-01T00:00:00Z"
    }];

    var self = this;
    setInterval(function() {
      self.getExpiryCounter();
    }, 1000)
  }
})

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.13/dist/vue.js"></script>
<div id="offers">
  <div v-for="ofr in offer">
    {{ofr.expryTime}}
  </div>
</div>

如何在 vue js html 中将到期时间显示为报价的计时器？

How to show the expiry time as timer for an offer in vue js html?

html

javascript

vue.js

vue-router

vue-component