vue中v-cloak处理刷新或者者加载出现闪烁显示变量问题
问题:
当网络较慢,在使用vue绑定数据的时候,渲染页面时会出现变量闪烁,例如
<div class="#app"> <p>{{value.name}}</p></div>在加载的时候会看到这种变量情况,过了零点几秒之后才会渲染数据
{{value.name}}处理:
在vue中有个指令可以处理这个问题,v-cloak
那么,v-cloak要放的位置并不需要增加到每个标签,只需在el挂载的标签上增加即可以
<div class="#app" v-cloak> <p>{{value.name}}</p></div>同时,在css中需加上
[v-cloak] { display: none;}这样即可以处理页面显示变量情况了
注意:
但是有的时候会不起作用,可能的起因有二:
1、v-cloak的display属性被层级更高的给覆盖掉了,所以要提高层级
[v-cloak] { display: none !important;}2、样式放在了@import引入的css文件中
v-cloak的这个样式放在@import 引入的css文件中不起作用,可以放在link引入的css文件里或者者内联样式中
说明
1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
3. 不得使用于非法商业用途,不得违反国家法律。否则后果自负!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是摆设,本站源码仅提供给会员学习使用!
7. 如遇到加密压缩包,请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » vue中v-cloak处理刷新或者者加载出现闪烁显示变量问题
1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
3. 不得使用于非法商业用途,不得违反国家法律。否则后果自负!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是摆设,本站源码仅提供给会员学习使用!
7. 如遇到加密压缩包,请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » vue中v-cloak处理刷新或者者加载出现闪烁显示变量问题