vue.js页面刷新出现闪烁问题的解决

Posted 吾乃神人也

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue.js页面刷新出现闪烁问题的解决相关的知识,希望对你有一定的参考价值。

因为浏览器是html从上到下执行,先执行Dom元素,然后执行javascript元素,v-show、v-if实在javaScript中控制,当走到javaScript时,Dom元素已经开始走动,所以如果网慢的话,会显示的特别明显。

以上两个问题都可以使用以下的方案来解决。

在css中定义

[v-cloak] {
   display:none;

}

在v-if中加上v-cloak即可解决.

示例:

[v-cloak] {
display: none; 
<div v-cloak>
{{ message }}
</div>

原理:

带有v-clock的的元素设置为display:none,隐藏掉,在等到vue解析到带有v-clock的节点时候,会把attribute和class同时remove掉,这样就可以实现防止节点的闪烁。


以上是关于vue.js页面刷新出现闪烁问题的解决的主要内容,如果未能解决你的问题,请参考以下文章

vue -- v-cloak解决刷新或者加载出现闪烁(显示变量)

echarts局部刷新地图的时候出现白屏闪烁?怎么解决这个闪烁,最好附上代码

vue项目解决路由跳转页面闪烁问题(过度动画)

vue刷新页面出现闪烁

解决vue渲染时闪烁{{}}的问题

sumoselect 多个下拉列表在页面加载时闪烁