vue 计时器

// Vue 计时器示例代码

<template>
  <div>
    <p>计时器: {{ seconds }}</p>
    <button @click="startTimer">开始</button>
    <button @click="stopTimer">停止</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      seconds: 0,
      timer: null
    };
  },
  methods: {
    startTimer() {
      this.timer = setInterval(() => {
        this.seconds++;
      }, 1000);
    },
    stopTimer() {
      clearInterval(this.timer);
      this.timer = null;
    }
  }
};
</script>

<style scoped>
/* 样式可以根据需要自行添加 */
</style>

解释说明：

• 模板部分 (<template>):

  • 显示当前计时器的秒数 ({{ seconds }})。
  • 提供两个按钮，分别用于启动和停止计时器。

• 脚本部分 (<script>):

  • data 中定义了两个属性：seconds 用于存储计时器的时间，timer 用于存储计时器的引用。
  • methods 中定义了两个方法：
    • startTimer: 使用 setInterval 每隔一秒增加一次 seconds 的值，并将计时器的引用保存到 timer 中。
    • stopTimer: 使用 clearInterval 停止计时器，并将 timer 置为 null。

• 样式部分 (<style scoped>):

  • 可以根据需要自行添加样式。