在项目在开发中,经常会遇到当数据加载时vue的一些标签就会闪现,然后等数据加载完后消失,还有一种情况就是使用v-show v-if来显示隐藏一些元素时,在页面初始化时会闪现那些本来想要隐藏元素,这时候就需要用到官网中提到的v-cloak来解决。
解决办法
那么,v-cloak要放在什么位置呢,是不是每个需要渲染数据的标签都要添加这个指令,经过试验发现,v-cloak并不需要添加到每个标签,只要在el挂载的标签上添加就可以,这是最简单有效的办法
{
{value.name}}
然后,在css里面要添加
[v-cloak] { display: none!important;}
这样就可以防止页面闪烁了。
但是有的时候会不起作用,可能的原因:
样式放在了@import引入的css文件中(传统的开发方式)
v-cloak的这个样式放在@import 引入的css文件中不起作用,可以放在link引入的css文件里或者内联样式中