[Vuejs]-Vuejs 3 v-if and v-else

by

0👍

When it comes to displaying components conditionally, it would be best to go with v-show since it won’t re-render every time when you make it hide/show

<CustomComponent v-show="this.IsScroll"/>
<SecondCustomComponent v-show="!this.IsScroll"/>

0👍

v-if and v-else should work with children inside the element. Also you don’t need to do v-if="this.isScroll" but just v-if="isScroll".

0👍

Assuming that IsScroll is set in the data, the this is not required.
Use v-show if you need to toggle something often, and use v-if if the condition is unlikely to change at runtime.

data: {
    IsScroll: true
},
methods:{
toggleIsScroll(){
.....
}
}

<div v-if="isScroll" @click= "toggleIsScroll" class ="spinner-container "> 
  <i ref = "icon" class = "bi bi-pause-fill icon"> </i>
    <div ref="spinner" class ="spinner-border text-dark loader ">  </div>               
</div>
<div v-else @click= "toggleIsScroll" class ="spinner-container "> 
  <i ref = "icon" class = "bi bi-play-fill icon"> </i>
    <div ref="spinner" class ="spinner-border text-dark loader visually-hidden">  </div> 
</div>

Leave a comment