vue实现倒计时功能

见如下代码

<template>
  <div>
    <div class="content">
      数据总采集次数：{{ clearTimes }} | 距离下次更新<span
        >{{ minute }}:{{ second }}</span
      >
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      minutes: 15,
      seconds: 0,
    };
  },
  methods: {
    num: function (n) {
      return n < 10 ? "0" + n : "" + n;
    },
    add: function () {
      var _this = this;
      var time = window.setInterval(function () {
        if (_this.seconds === 0 && _this.minutes !== 0) {
          _this.seconds = 59;
          _this.minutes -= 1;
        } else if (_this.minutes === 0 && _this.seconds === 0) {
          _this.seconds = 0;
          window.clearInterval(time);
        } else {
          _this.seconds -= 1;
        }
      }, 1000);
    },
  },
  props: {
    clearTimes: {
      type: Number,
      default: 0,
    },
    intervalFlag: {
      type: Number,
      default: 0,
    },
  },
  mounted() {
    this.add();
  },
  watch: {
    intervalFlag: {
      handler() {
        this.minutes = 15;
        this.seconds = 0
      },
    },
    second: {
      handler(newVal) {
        this.num(newVal);
      },
    },
    minute: {
      handler(newVal) {
        this.num(newVal);
      },
    },
  },
  computed: {
    second: function () {
      return this.num(this.seconds);
    },
    minute: function () {
      return this.num(this.minutes);
    },
  },
};
</script>
<style lang="scss" scoped>
.content {
  width: 100%;
  // text-align: right;
  display: flex;
  justify-content: flex-end;
  height: 30px;
}
</style>