10秒计数计时器/ vue.js

<template>
  <div>
    <p>{{ timer }}</p>
    <button v-if="!isRunning" @click="startTimer">开始</button>
    <button v-else @click="pauseTimer">暂停</button>
    <button @click="resetTimer">重置</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      timer: 10,
      isRunning: false
    };
  },
  methods: {
    startTimer() {
      this.isRunning = true;
      this.timer = 10;
      this.countdown();
    },
    pauseTimer() {
      this.isRunning = false;
    },
    resetTimer() {
      this.isRunning = false;
      this.timer = 10;
    },
    countdown() {
      if (this.timer > 0 && this.isRunning) {
        setTimeout(() => {
          this.timer--;
          this.countdown();
        }, 1000);
      } else {
        this.isRunning = false;
        // 触发计时器结束事件
        this.$emit('timer-end');
      }
    }
  }
};
</script>