Vue.js 使用标志位控制 setInterval 暂停和恢复

Vue.js 中可以通过在 data 中定义一个标志位来控制 setInterval 的停止和恢复。具体操作如下：

1. 在 data 中定义一个标志位 isPaused，初始值为 false，表示 setInterval 是否暂停。

data() {
  return {
    isPaused: false
  }
}

2. 在 mounted 生命周期钩子函数中使用 setInterval，并根据 isPaused 的值来决定是否执行定时任务。

mounted() {
  setInterval(() => {
    if (!this.isPaused) {
      // 执行定时任务的代码
    }
  }, 1000)
}

3. 在模板中添加控制按钮，通过点击按钮来改变 isPaused 的值，从而控制 setInterval 的停止和恢复。

<button @click='isPaused = !isPaused'>
  {{ isPaused ? '恢复' : '暂停' }}
</button>

这样，当点击按钮时，isPaused 的值会在 true 和 false 之间切换，从而控制 setInterval 的停止和恢复。