解决Vue加载时闪烁


实例

如上图所示,左上角的菜单数据是动态获取的,在获取到数据之前,菜单里是一片空白的。
取到数据之后,才会将数据填充进去,在这期间会出现闪烁的现象。
解决办法:使用v-cloak


html结构如下:

<ul v-cloak>
  <li v-for="(item, index) in 10" :key="index">{{item}}</li>
</ul>

第一步,在闪烁元素的最外层添加上一个v-cloak
第二步,CSS代码

// 在填充数据之前隐藏
[v-cloak] {
    display: none;
}

这里的意思是,在模板初始化钱,隐藏带有v-cloak的标签。



最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。