vue 解决页面加载时闪烁出现vue标签或者指令的问题v-cloak

在项目在开发中，经常会遇到当数据加载时vue的一些标签就会闪现，然后等数据加载完后消失，还有一种情况就是使用v-show v-if来显示隐藏一些元素时，在页面初始化时会闪现那些本来想要隐藏元素，这时候就需要用到官网中提到的v-cloak来解决。

解决办法

那么，v-cloak要放在什么位置呢，是不是每个需要渲染数据的标签都要添加这个指令，经过试验发现，v-cloak并不需要添加到每个标签，只要在el挂载的标签上添加就可以，这是最简单有效的办法

<div class="#app" v-cloak>
    <p>{{value.name}}</p>
</div>

　　然后，在css里面要添加

[v-cloak] {
    display: none!important;
}

　　这样就可以防止页面闪烁了。

但是有的时候会不起作用，可能的原因:

样式放在了@import引入的css文件中（传统的开发方式）

v-cloak的这个样式放在@import 引入的css文件中不起作用，可以放在link引入的css文件里或者内联样式中

 

转载于:https://www.cnblogs.com/chuntian1989/p/10637578.html