Solve the problem of flickering when using v-if to hide elements in vue

Flashing problem when hiding elements with v-if

Solution to add v-cloak to div

<div class="mask" v-if="modelShow" v-cloak></div>

Then in css

[v-cloak] {
  display: none;
}

That's OK ~

v-if controls visible and hidden, page loading flashes v-cloak

<div >  
<div v-if="type === 'A'" v-cloak>    
A  
</div>  
<div v-else-if="type === 'B'" v-cloak>    
B  
</div>  
<div v-else-if="type === 'C'" v-cloak>    
C  
</div>  
<div v-else v-cloak>    
Not A/B/C  
</div>
</div>

[v-cloak] 
{ 
display:none;
}

The above is personal experience. I hope you can give you a reference and I hope you can support me more.