Vue中 v-if/v-show/插值表达式导致闪现的原因及解决办法
更新时间：2018年10月12日 11:26:00 作者：魏永_Owen_Wei
在开发过程中经常会发现当页面明明不应该出现的元素或内容会闪现一下然后消失，这篇文章给大家分享Vue中 v-if/v-show/插值表达式导致闪现的原因及解决办法，一起看看吧
在开发过程中经常会发现当页面明明不应该出现的元素或内容会闪现一下然后消失，最近研究了一下这个问题的原因和解决办法，这里和大家分享一下。
1.闪现的原因
这个问题是因为Vue要等到HTML DOM加载完成后才会执行JS的编译，所以对使用的指令如 v-if , v-show 或者使用了插值表达式 {{}} 都会出现闪现的情况。因为在这些判断条件或表达式执行之前，DOM已经渲染出来了，之后Vue才会执行相应的JS代码。
2.解决的办法
其实在了解了原因之后我们就有了大概的思路，既然是在JS执行之前会出现，那就让元素在JS执行之前都保持不显示就好了。那事情就分为两步：
- 选择在JS执行前要隐藏的元素
- 添加display:none样式
如何只定位JS执行前的元素呢？Vue有一个指令 v-cloak ，它的特殊之处在于 保持在元素上直到关联实例结束编译 。就是说这个属性会一直在元素上，直到编译结束。只需要在需要隐藏的元素上增加 v-cloak 指令即可。
接下来在CSS中定义隐藏样式即可：
到这里，这个问题就解决了。Vue是前端技术的一次大的跃进，有坑并不可怕，相信办法总比问题多。
总结
以上所述是小编给大家介绍的Vue中 v-if/v-show/插值表达式导致闪现的原因及解决办法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
相关文章
最近一段时间，一直在做主题方面的工作。我们的主题，并不是简单切换一下颜色，或者排版变化这些，而是变化比较大的主题。比如说：主题1和主题2看起来完全不一样，功能甚至都不一样。这样，通过切换css就无法做到了，因此我思考良久，使用了如下2种方法2021-06-06
vue通过js动态修改元素的样式，如果是固定的几个样式，我常用的是绑定元素的calss,给不同的class写好需要的样式，js控制是否使用这个class2022-09-09
本文通过实例代码给大家介绍了vue interceptor 使用,需要的朋友可以参考下2018-09-09
今天我们来学习一下watch监听器和它的好兄弟watchEffect监听器。这个相对来说比较简单，用的不是很多，当然了，根据自己的项目情况自行决定使用，希望对大家有所帮助2023-02-02
这篇文章主要给大家介绍了关于多个Vue项目部署到服务器的相关资料，文中通过图文介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-10-10
这篇文章主要为大家介绍了三种方法，可以实现将HTML页面转为PDF并实现下载。文中的示例代码讲解详细，感兴趣的小伙伴可以学习一下2022-04-04
这篇文章主要为大家详细介绍了Vue2递归组件实现树形菜单的相关代码，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-04-04
这篇文章主要介绍了vue+element+oss实现前端分片上传和断点续传，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-03-03
这篇文章主要介绍了vue elementui上传图片限制格式、大小和尺寸方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
这篇文章主要为大家详细介绍了Vue3中的Excel数据管理,即下载模板并导入数据功能的实现,文中的示例代码讲解详细,感兴趣的小伙伴可以参考一下2024-05-05
最新评论