因为浏览器是html从上到下执行,先执行Dom元素,然后执行javaScript元素,v-show、v-if实在javaScript中控制,当走到javaScript时,Dom元素已经开始走动,所以如果网慢的话,会显示的特别明显。
以上两个问题都可以使用以下的方案来解决。
在css中定义
[v-cloak] {
display:none;
}
在v-if中加上v-cloak即可解决.(但是只有单页面可以,在搭建的脚手架中是不行的,所以脚手架项目的朋友就不用尝试了)
原理:
带有v-clock的的元素设置为display:none,隐藏掉,在等到vue解析到带有v-clock的节点时候,会把attribute和class同时remove掉,这样就可以实现防止节点的闪烁。
示例:
[v-cloak] { display: none; } <div v-cloak> {{ message }} </div>