在开发过程中，经常会发现不应该出现在页面上的元素或内容会闪烁，然后消失。最近研究了这个问题的成因和解决方法，在这里和大家分享一下。

1.闪光的原因

出现这个问题的原因是Vue在加载HTML DOM之前不会编译JS，所以v-if、v-show或者插值表达式{{}}等指令会闪烁。因为在执行这些判断条件或者表达式之前已经渲染了DOM，那么Vue就会执行相应的JS代码。

2.解决方案

其实了解了原因之后，我们就有了大概的想法。因为它会在JS执行之前出现，所以最好在JS执行之前不要显示元素。那件事分为两步：

选择JS执行前要隐藏的元素，并添加display:none样式。我们如何在JS执行之前只定位元素？Vue有一个指令v-斗篷，它的特殊之处在于它会一直保留在元素上，直到相关的实例完成编译。也就是说，这个属性将保留在元素上，直到编译结束。您只需要将v-斗篷命令添加到要隐藏的元素中。

然后在CSS中定义隐藏样式：

到这里，问题就解决了。Vue是前端技术的一大飞跃。有坑不可怕。我相信解决方案总是比问题多。

摘要

以上就是边肖介绍的Vue中v-if/v-show/插值表达式的原因和解决方法。希望对大家有帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！