node.js+vue的倒计时

**倒计时
xx时xx分xx秒 **

src/App.vue

<template>
  <div id="app">
    <Time1 :miankey="msg"/>
  </div>
</template>

<script>
  import Time1 from './components/Time1'

  export default {
    name: 'App',
    data() {
      return {
        msg: "20xx-xx-xx xx:xx:xx"
      }
    },
    components: {
         Time1
    }
  }
</script>

<style>
 //样式可写可不写
</style>

src/components/Time1

<template>
  <div id="mybtn">
    <p>倒计时</p>
    {{hour}}时{{min}}分{{sec}}秒
  </div>
</template>

<script>
  export default {
    name: "Time1",
    props: ["miankey"],
    data() {
      return {
        hour: "00",
        min: "00",
        sec: "00"
      }
    },
    methods: {
      countdown() {
        var star = new Date().getTime(); //当前时间
        var end = new Date(this.miankey).getTime(); //设定时间
        var time = end - star;

        if (time > 0) {
          this.hour = this.format(parseInt(time / 1000 / 60 / 60));
          this.min = this.format(parseInt(time / 1000 / 60 % 60));
          this.sec = this.format(parseInt(time / 1000 % 60));
          var t = this;
          setTimeout(function() {
            t.countdown();
          }, 1000);

        } else {
          alert("时间到！");
        }
      },
      format(obj) {
        if (obj < 10) {
          return "0" + obj;
        } else {
          return obj;
        }
      }
    },
    mounted() {
      this.star = new Date().getTime();
      this.countdown();
    }
  }
</script>

<style>
  #mybtn {
    background-color: aliceblue;
    width: 500px;
    height: 300px;
  }
</style>

PS：项目目录