好资源导航 » 文章资讯 » vue中v-cloak解决刷新或者加载出现闪烁问题（显示变量）

vue中v-cloak解决刷新或者加载出现闪烁问题（显示变量）

2023-09-13 22:42:05 269

在使用vue绑定数据的时候，渲染页面时会出现变量闪烁，例如


{{value.name}}

在加载的时候会看到

在页面出现，过了几秒之后才会渲染数据，在vue中有个指令可以解决这个问题，v-cloak

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


{{value.name}}

而且，在css里面要添加

[v-cloak]{
display:none;
}

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

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

1、v-cloak的display属性被层级更高的给覆盖掉了，所以要提高层级

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

2、样式放在了@import引入的css文件中

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

补充：

下面看下Vue中的v-cloak解读

v-cloak的作用和用法

用法：

这个指令保持在元素上直到关联实例结束编译。和CSS规则如[v-cloak]{display:none}一起用时，这个指令可以隐藏未编译的Mustache标签直到实例准备完毕。官方API


{{msg}}

HTML绑定Vue实例，在页面加载时会闪烁

然后才会出现加载完成字样，为了效果更明显，我们可以延后加载Vue实例

setTimeout(()=>{
newVue({
el:'#app',
data:{
msg:'hello'
}
})
},2000)

v-cloak可以解决这一问题，在css中加上

[v-cloak]{
display:none;
}

在html中的加载点加上v-cloak，就可以解决这一问题


{{msg}}

Vue1.x与Vue2中v-cloak的不同

Vue1中，允许将Vue实例挂载在body上，而Vue2是不允许的，想对整个页面实例化，需要另外用一个div来容纳整个页面内容，对其进行实例化

这样在使用v-cloak时，同样需要用到这种方法

为什么我用的v-cloak无效？

在实际项目中，我们常通过@import来加载css文件

@import"style.css"
@import"index.css"

而@import是在页面DOM完全载入后才会进行加载，如果我们将[v-cloak]写在@import加载的css文件中，就会导致页面仍旧闪烁。

为了避免这种情况，我们可以将[v-cloak]写在link引入的css中，或者写一个内联css样式，这样就得到了解决。

总结

以上所述是小编给大家介绍的vue中v-cloak解决刷新或者加载出现闪烁问题（显示变量），希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！