Vue.js实现点击按钮切换计数器启停并修改按钮文本求助

完整修改后代码 #

逻辑部分 #

// <script>标签内代码
const app = new Vue({
  el: '#app',
  data: {
    welcomeMsg: 'Testing',
    result: 0,
    // 计数器运行状态标记
    isRunning: false,
    // 存储定时器ID，用于清除定时任务
    timerId: null
  },
  methods: {
    countToTen() {
      // 当前处于运行状态时，点击执行停止逻辑
      if (this.isRunning) {
        clearTimeout(this.timerId)
        this.isRunning = false
        return
      }
      // 当前处于停止状态时，点击执行启动逻辑
      this.isRunning = true
      if (this.result < 10) {
        // 存储定时器ID
        this.timerId = setTimeout(() => {
          this.result += 1
          this.countToTen()
        }, 1000)
      }
      // 计数到10后自动重置状态，支持再次启动
      if (this.result >= 10) {
        this.result = 0
        this.isRunning = false
      }
    }
  }
})

页面模板部分 #

<div id="app">
  <!-- 按钮文本根据运行状态动态切换 -->
  <button @click="countToTen">{{ isRunning ? 'Stop counting' : 'Start counting' }}</button>
  <p id="result">TimerStarted: {{result}}</p>
</div>

核心修改说明 #

• 新增isRunning状态变量：同时控制计数器启停逻辑和按钮文本的动态切换，无需手动操作DOM修改按钮内容
• 新增timerId变量：存储每次setTimeout返回的唯一ID，解决原代码clearTimeout无参数无法精准清除定时器的问题
• 调整点击事件逻辑：点击按钮时先判断当前运行状态，分别执行停止/启动操作，符合交互预期
• 新增计数到10后的重置逻辑：计数到达10后自动重置数值和运行状态，支持用户再次启动计数

内容的提问来源于stack exchange，提问作者Ayesha