隐藏计时器并显示文本框

Question

我想在计时器到达 0 时显示文本框来代替计时器。显示框后计时器应隐藏。 我正在寻找一个简单的逻辑，在 vue.js 中使用“v-show”或“destroy”属性。

mounted () {
this.interval = setInterval(() => {
  if (this.value === 0) {
    return (this.value = 3)
  }
  this.value += -1
}, 1000)
}

链接代码 https://codepen.io/prasanna_sri/pen/rdravJ

Answer 1

您可以使用v-if 和v-else 指令在两个元素之间切换。

我已经更新了你的 codepen 并完成了以下操作：

• 为您的数据值添加了一个默认值 (3)。
• 将return (this.value = 3) 更改为return，因此回调不会无限期运行。
• 在进度组件中添加了v-if="this.value"
• 在您的文本框中添加了v-else

请注意，如果您想经常切换进度条，您应该改用v-show 指令。 v-if 具有较高的切换成本，而 v-show 具有较高的渲染成本，因为它始终在 dom 中渲染，但使用 CSS display:none 属性隐藏。