vue绑定数据,渲染页面时会出现变量闪烁 您所在的位置:网站首页 vue加载数据css导致页面闪烁 vue绑定数据,渲染页面时会出现变量闪烁

vue绑定数据,渲染页面时会出现变量闪烁

2024-05-26 11:18| 来源: 网络整理| 查看: 265

在使用vue绑定数据的时候,渲染页面时会出现变量闪烁,例如

{{value.name}}

在加载的时候会看到

{{value.name}}

原因:由于JavaScript去操作DOM,都会等待DOM加载完成(DOM ready)。对于vuejs、angularjs这些会在DOM ready完会才回去解析html view Template,

所以对于Chrome这类快速的浏览器你会看见有闪烁的情况出现。而对于IE7,8这类解析稍慢的浏览器大部分情况下是不会出现这个问题的。(别处借来的)

解决办法:

在页面出现,过了几秒之后才会渲染数据,在vue中有个指令可以解决这个问题,v-cloak

v-cloak要放在什么位置呢,是不是每个需要渲染数据的标签都要添加这个指令,经过我的试验发现,v-cloak并不需要添加到每个标签,只要在el挂载的标签上添加就可以,

{{value.name}}

而且,在css里面要添加

[v-cloak] { display: none; }

这样就可以防止页面闪烁了。

 备注:

但是有的时候会不起作用,可能的原因有二:

1、v-cloak的display属性被层级更高的给覆盖掉了,所以要提高层级

[v-cloak] { display: none !important; }

2、样式放在了@import引入的css文件中

v-cloak的这个样式放在@import 引入的css文件中不起作用,可以放在link引入的css文件里或者内联样式中



【本文地址】

公司简介

联系我们

今日新闻

    推荐新闻

    专题文章
      CopyRight 2018-2019 实验室设备网 版权所有