使用v-on制作一个简单的计时器

在Vue中，你可以使用`v-on`指令来监听事件，例如创建一个简单的计时器。这里是一个基本的示例，使用JavaScript的`setInterval`函数来每隔一定时间更新计时器：

<template>
  <div>
    <button @click="startTimer">Start</button>
    <br />
    <span id="timer">{{ timerText }}</span>
    <button @click="stopTimer">Stop</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      timerInterval: null,
      timerText: '00:00:00',
    };
  },
  methods: {
    startTimer() {
      this.timerInterval = setInterval(() => {
        let minutes = Math.floor(this.time / 60);
        let seconds = this.time % 60;
        this.$set(this, 'timerText', formatTime(minutes, seconds));
      }, 1000); // 每秒更新一次
    },
    stopTimer() {
      clearInterval(this.timerInterval);
    },
    time: 0, // 秒数计时器
    formatTime(minutes, seconds) {
      return `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
    },
  },
  mounted() {
    this.startTimer();
  },
  beforeDestroy() {
    this.stopTimer(); // 记得在组件销毁前停止计时器
  },
};
</script>

在这个示例中，我们有一个开始按钮（`@click="startTimer"`），当点击它时启动计时器；一个停止按钮（`@click="stopTimer"`）用于暂停计时。`time` 数据属性记录当前秒数，每秒钟递增1。`formatTime` 函数用于将分钟和秒转换成格式化的字符串。