vue中使用v-if隐藏元素时会出现闪烁问题的解决

更新时间：2022年04月21日 09:54:41 作者：不靠谱的作曲家

这篇文章主要介绍了vue中使用v-if隐藏元素时会出现闪烁问题的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教

使用v-if隐藏元素时出现闪烁问题

解决办法在div中加入v-cloak

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

然后在css中

[v-cloak] {
  display: none;
}

就OK啦~

v-if控制显隐,页面加载出现闪现 v-cloak

<div id="divApp">  
<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;
}

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

解决vue+element 键盘回车事件导致页面刷新的问题
今天小编就为大家分享一篇解决vue+element 键盘回车事件导致页面刷新的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-08-08
vue页面右下角添加悬浮按钮组件的方法代码
这篇文章主要介绍了vue页面右下角添加悬浮按钮组件的方法代码,在Vue项目中,通过在顶层路由文件中添加代码,可以实现页面左下角悬浮按钮的功能,文中通过代码介绍的非常详细,需要的朋友可以参考下
2024-11-11
vue之nextTick全面解析
本篇文章主要介绍了vue之nextTick全面解析，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-05-05
Vue中v-show添加表达式的问题(判断是否显示)
这篇文章主要介绍了关于Vue中v-show中添加表达式用于判断是否显示的问题,很多朋友经常会遇到这样的需求，有数据来源和标签类型两行选项，需要实现点击上面的某个数据来源时，标签类型自动切换功能，感兴趣的朋友一起看看吧
2018-03-03
Vue基本使用之对象提供的属性功能
这篇文章主要介绍了Vue基本使用之对象提供的属性功能实例详解，非常不错，具有一定的参考借鉴价值 ,需要的朋友可以参考下
2019-04-04
vue组件通信的多种方法详解
这篇文章主要为大家介绍了vue组件通信的几种方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助
2021-11-11
vue forEach循环数组拿到自己想要的数据方法
今天小编就为大家分享一篇vue forEach循环数组拿到自己想要的数据方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-09-09
Vue3生命周期Hooks原理与调度器Scheduler关系
这篇文章主要为大家介绍了Vue3生命周期Hooks原理与调度器Scheduler关系详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-07-07
Vue中使用mixins混入方式
这篇文章主要介绍了Vue中使用mixins混入方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-08-08
vue2 使用@vue/composition-api依赖包编译、打包各种报错问题分析
由于package.json 文件中 vue、vue-template-compiler 版本号前面多了个 ^ 导致实际导入时，node_module中的 vue 版本可能被升级为 2.7.x，这篇文章主要介绍了vue2 使用@vue/composition-api依赖包编译、打包各种报错问题分析,需要的朋友可以参考下
2023-01-01