vue v-cloak 解决页面加载时闪烁出现vue标签或者指令的问题

前沿


在项目在开发中,经常会遇到当数据加载时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文件里或者内联样式中

推荐阅读更多精彩内容

  • ## 框架和库的区别?> 框架(framework):一套完整的软件设计架构和**解决方案**。> > 库(lib...
    Rui_bdad阅读 1,828评论 1 4
  • 页面展示 基本指令 v-text用于在页面中展示数据,可以简写为{{ }}的形式 {{msg}} <!--这两...
    羊烊羴阅读 607评论 0 0
  • 概要 64学时 3.5学分 章节安排 电子商务网站概况 HTML5+CSS3 JavaScript Node 电子...
    阿啊阿吖丁阅读 2,761评论 0 2
  • HTML标签解释大全 一、HTML标记 标签:!DOCTYPE 说明:指定了 HTML 文档遵循的文档类型定义(D...
    米塔塔阅读 1,962评论 1 40
  • 前端开发面试知识点大纲: HTML&CSS: 对Web标准的理解、浏览器内核差异、兼容性、hack、CSS基本功:...
    秀才JaneBook阅读 1,037评论 0 23