vue--v-cloak-解决页面加载时闪烁出现vue标签或者指令的问题
2020-01-13 05:11
489 查看
前沿
在项目在开发中,经常会遇到当数据加载时vue的一些标签就会闪现,然后等数据加载完后消失,这时候就需要用到官网中提到的v-cloak来解决。
首先说一下经常遇到的情况。
step1,加载时遇到{{value.name}}
闪烁,是因为你在渲染时是这么写的<p>{{value.name}}</p>
step2,加载时遇到一个空的盒子里边什么也没有,是因为你在渲染时是这么写的<p v-html="value.name"></p>
解决办法
那么,v-cloak要放在什么位置呢,是不是每个需要渲染数据的标签都要添加这个指令,经过试验发现,v-cloak并不需要添加到每个标签,只要在el挂载的标签上添加就可以,这是最简单有效的办法
<div class="#app" v-cloak> <p>{{value.name}}</p> </div>
然后,在css里面要添加
[v-cloak] { display: none; }
这样就可以防止页面闪烁了。
但是有的时候会不起作用,可能的原因有二:一,v-cloak的display属性被层级更高的给覆盖掉了,所以要提高层级
[v-cloak] { display: none !important; }
二,样式放在了@import引入的css文件中(传统的开发方式)
v-cloak的这个样式放在@import 引入的css文件中不起作用,可以放在link引入的css文件里或者内联样式中
- 点赞
- 收藏
- 分享
- 文章举报
相关文章推荐
- vue中v-cloak解决刷新或者加载出现闪烁问题(显示变量)
- vue.js加载页面出现闪烁问题的解决
- vue -- v-cloak解决刷新或者加载出现闪烁(显示变量)
- vue -- v-cloak解决刷新或者加载出现闪烁(显示变量)
- vue页面加载闪烁问题的解决方法
- Vue中 v-if 和v-else-if页面加载出现闪现的问题及解决方法
- 解决Vue使用mint-ui loadmore实现上拉加载与下拉刷新出现一个页面使用多个上拉加载后冲突问题
- Angular\Vue解决页面数据加载时出现{{message}}闪烁的情况
- vue.js 部署到tomcat中出现访问路径不对,页面加载不出来问题及解决
- vue 在nginx下页面刷新出现404问题解决和在nginx下页面加载了js但是页面显示空白问题解决
- Angularjs 初始化未加载完毕闪烁问题解决 ng-cloak
- AngularJS页面访问时出现页面闪烁问题的解决
- AngularJS页面访问时出现页面闪烁问题的解决
- Android WebView加载出现空白页面问题解决
- JSP页面中使用JSTL标签出现无法解析问题解决办法
- Vue-router本地服务器使用history出现找不到页面的问题解决方法
- 关于angular的include指令,include的页面无法加载js问题解决
- JSP页面中使用JSTL标签出现无法解析问题解决办法
- 解决把水晶报表下载到客户端过程中,出现下载整个页面(.aspx)或者直接载web页中打开word文件的问题!
- android解决初始加载页面出现带标题的页面问题