vue中v-cloak解决刷新或者加载出现闪烁(显示变量)
2024-08-25 16:47:42
在使用vue绑定数据的时候,渲染页面时会出现变量闪烁,例如
<div class="#app">
<p>{{value.name}}</p>
</div>
在加载的时候会看到
{{value.name}}
在页面出现,过了几秒之后才会渲染数据,在vue中有个指令可以解决这个问题,v-cloak
那么,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文件里或者内联样式中
最新文章
- 如何解决CDR x8安装时显示“已停止工作”
- 转自:C#中TextBox水印提示的简单实现
- Kanzi Studio中的概念
- 基于CSS+dIV的网页层,点击后隐藏或显示
- Adapter优化方案的探索
- s3c2440的GPIO驱动
- 【English】八、食物相关
- insert主键返回 selectKey使用
- warnings.warn(";allowed_domains accepts only domains, not URLs. Ignoring URL entry %s in allowed_doma
- python爬取豆瓣前25个影片内容的正则表达式练习
- ionic3 使用swiper插件 实现轮播效果
- JMeter&#160;逻辑控制之While循环控制器(While&#160;Controller)
- unity 对象旋转,自转
- Python3学习之路~4.3 装饰器
- html5-内联框架
- Android dimen
- GoJS 、 GoDiagram
- ldap添加memberof支持
- PL/SQL常用设置
- 内核加载模块时出现Unknown symbol等提示
热门文章
- 【java】多态
- Python中的@符号
- Some elementary algorithms on discrete differential geometry(DDGSpring2016 Demos)
- C++中字符编码的转换(Unicode、UTF-8、ANSI)
- (转)android 中uri.parse()用法
- DataGridView导出数据到Excel
- 【原创】Linux系统不能上互联网情况下软件更新安装方法
- SpringBoot aop 注解 数据权限校验
- (最完美)红米手机4的USB调试模式在哪里开启的经验
- QVector也是隐式数据共享的