0
点赞
收藏
分享

微信扫一扫

Vue数据绑定后文本闪烁问题分析及解决方案


Vue文本闪烁问题

一、问题描述

代码示例:

<div id="app">
<span>{{user.userName}}</span>
</div>

页面显示:

{{user.userName}}

问题详情:在加载页面的时候,刚开始我们会看到  {{user.userName}}  ,而后才可以被绑定的数据所替换,影响用户的使用体验。

二、问题分析

只有在DOM加载完成后,JavaScript才可以去操作DOM。对于vuejs、angularjs这些会在DOM ready后会才解析视图模板,所以对于速度较快的浏览器,变回出现文本闪烁的情况。

三、解决方案

在 vue.js 已经给出了解决方案,即使用指令v-cloak;但是,如果页面中多个标签进行了数据绑定,我们显然不能对所有的标签一一使用v-cloak指令;其实,我们只需要找到Vue实例的挂载点el:"#app",对该标签使用v-cloak即可。对应的html文件修改如下:

<div id="app">
<span>{{user.userName}}</span>
</div>

另外,我们还需要在对应的css文件中添加以下样式:

[v-cloak] {
display: none;
}

此时,文本闪烁问题已经解决;如果还是有文本闪烁的现象,请参考第四步:温馨提示。

四、温馨提示

1、v-cloak的 display 属性可能被层级更高的样式所覆盖,必要时可做以下处理。

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

2、因 v-cloak 样式在@import 引入的css文件中不起作用,需放在link引入的css文件中或者内联样式中。

3、在v-cloak样式的上方, 不可以 有注释文字。


举报

相关推荐

0 条评论