Vue 2 倒數計時器：套件與手刻兩種做法

npm i vue2-flip-countdown --save

<template>
  <ul>
    <li><h3>{{ days }}</h3><span>Days</span></li>
    <li><h3>{{ hours }}</h3><span>Hours</span></li>
    <li><h3>{{ minutes }}</h3><span>Minutes</span></li>
    <li><h3>{{ seconds }}</h3><span>Seconds</span></li>
  </ul>
</template>

<script>
export default {
  name: "TimerCountdown",
  props: ["gettimer"],
  data() {
    return {
      minutes: 0,
      seconds: 0,
      hours: 0,
      days: 0,
    };
  },
  mounted() {
    this.timerCount(this.gettimer);
  },
  methods: {
    timerCount(timer) {
      const countDownDate = new Date(timer).getTime();

      setInterval(() => {
        const now = new Date().getTime();
        const distance = countDownDate - now;

        this.days = Math.floor(distance / (1000 * 60 * 60 * 24));
        this.hours = Math.floor(
          (distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60),
        );
        this.minutes = Math.floor(
          (distance % (1000 * 60 * 60)) / (1000 * 60),
        );
        this.seconds = Math.floor((distance % (1000 * 60)) / 1000);
      }, 1000);
    },
  },
};
</script>

<CountDown :gettimer="timer" />