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

在使用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文件里或者内联样式中

转载于:https://www.cnblogs.com/Smiled/p/7580716.html

vue -- v-cloak解决刷新或者加载出现闪烁（显示变量）相关推荐

html5 循环加载图片,解决vue的 v-for 循环中图片加载路径问题
先看一下产品需求,如下图所示, 产品要求图片和它的名称一一对应,本来是非常简单的需求,后台直接返回图片路径和名称,前台直接读取就可以了,但是我们没有存储图片的服务器,再加上是一个实验性的需求,图片需要 ...
android 解决listview.notifyDataSetChanged刷新时Imageloader加载图片闪烁问题
今天,简单讲讲android里再listview调用notifyDataSetChanged刷新界面时,Imageloader加载图片会闪烁的问题. 最近,发现app里的listview图片会出现闪烁 ...
【Vue】—解决页面图片加载抖动的问题
[Vue]-解决页面图片加载抖动的问题问题如下解决办法 overflow:hidden; height:0; padding-bottom:*; // 其中*处填图片的高宽百分比=高/宽*100 ...
vue高德、谷歌地图动态加载
vue高德.谷歌地图动态加载前言引入地图资源页面使用完整map.js 前言因为我们这个项目,做的是国际化项目,考虑的是,在国内使用高德地图,在国外使用谷歌地图,所以在这里做了个动态引入地图, ...
vue项目结构及启动文件加载过程分析
vue项目结构及启动文件加载过程分析一.vue项目结构 1.导入项目准备好开发工具Visual Studio Code,导入生成的项目案例.我的Vue版本: 2.项目目录及文件说明 2.1.项目主 ...
Vue 中的 v-cloak 作用及用法-vue页面加载时会闪烁
用法: 这个指令保持在元素上直到关联实例结束编译.和 CSS 规则如 [v-cloak] { display: none } 一起用时,这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕 ...
Github无法加载或不显示图片解决办法
最近发现Github无法加载或不显示图片,严重影响日常使用.查找资料并总结解决步骤如下: 1.Mac终端输入 sudo vi /etc/hosts 2.输入密码后,点击 i键,进入Insert模式,将 ...
渲染元素中动态创建div来渲染html dom组件，是需要将element元素对象return返回的（也支持直接返回ht的widget、ui等视图view组件），刷新重新加载图纸
如下面所示,动态创建的div,设置了id后,浏览器也能看到,但是刷新(并非刷新浏览器页面)重新加载图纸,div会被自动移除及重新创建,合情合理,因为是随着渲染元素机制走的. 所以在创建div之前判断浏 ...
android 刷新某条数据_Android 支持刷新、加载更多、带反弹效果的RecyclerView
点击上方"Android技术杂货铺",选择"标星" 干货文章,第一时间送达! 开篇当前市面上很多支持刷新.加载更多RecyclerView开源库,为何我这里还 ...
解决国内GitHub加载慢的问题
解决国内GitHub加载慢的问题参考文章: (1)解决国内GitHub加载慢的问题 (2)https://www.cnblogs.com/ltfxy/p/9998602.html (3)https: ...

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

vue -- v-cloak解决刷新或者加载出现闪烁（显示变量）相关推荐

最新文章

热门文章