Vue。js使用v-cloak后仍显示变量的解决方法 - 行业资讯 - 肥雀云

v-cloak ,这个指令是防止页面加载时出现vuejs的变量名而设计的,但有时候添加了这个指令仍会显示变量,这是怎么回事呢?

。　　

<强> v-cloak用法:

HTML代码:

　　　　　　& lt; div v-cloak> 　　{{消息}} 　　& lt;/div> 　　　　

CSS代码:

　　　　　　(v-cloak) { 　　显示:没有; 　　} 　　　　

这样直至div内变量编译完毕后才会显示。

但有时添加完毕后仍有部分变量会显示,这是怎么回事呢?通过控制台查看,原来是v-cloak的显示属性被优先级别高的样式覆盖所导致,我的处理方案是添加!重要的是,简单粗暴。新css样式如下:

　　　　　　(v-cloak) { 　　显示:没有!重要; 　　} 　　　　

经测试,并不会产生副作用。如果大家有更好的方案,欢迎交流。相关截图如下:

Vue。js使用v-cloak后仍显示变量的解决方法

未使用!重要前的截图