隐藏计时器和显示文本框

Question

一旦计时器到达 0 ，我想显示文本框代替计时器。显示框后，计时器应隐藏。 我正在用＆＃39; v-show＆＃39;来寻找一个简单的逻辑。或者＆＃39;销毁＆＃39; vue.js中的财产。

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属性。