[Vuejs]-Hide timer and display text box

by

0👍

You can use v-if and the v-else directives to toggle between the two elements.

I’ve updated your codepen and done the following:

  • Added a default value (3) to your data value.
  • changed return (this.value = 3) to return, so the callback doesn’t run indefinitely.
  • Added v-if="this.value" on your progress component
  • Added v-else on your text box

Please note that if you would like to toggle the progress bar often, you should use the v-show directive instead. v-if has higher toggle cost, while v-show has a higher render cost because it’s always rendered in the dom but hidden with the CSS display:none property.

👤RAH

Leave a comment