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

Posted 2020-11-10 吾乃神人也

因为浏览器是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掉，这样就可以实现防止节点的闪烁。