在使用vue绑定数据的时候,渲染页面有时会出现画面闪烁,例如:
<div>{{value}}</div>
加载时可能会看到
{{value}}
加载完成后,才会用具体数据替换{{value}}
虽然可以通过使用v-text指令,代替{{}}
<div v-text="value"></div>
但这个方案并不是最优解。
在vue中有个指令可以解决这个问题,v-cloak
<div id="app" v-cloak>
<p>{{value}}</p>
</div>
并添加相应css
[v-cloak] {
display: none;
}
这样就可以防止页面闪烁了。
提示:在最终挂载的根元素上使用最佳,如果样式未生效,可添加!important。