在开发的时候，经常会遇到页面不该出现的内容会闪现一下然后消失，研究了一下这个问题的原因和解决方案，在这里写了一个简单的demo跟大家分享一下
闪现演示：
load.gif
闪现原因：
vue要等到DOM加载完毕之后才执行js的编译，所以对使用了指令（比如v-if，v-show）或者使用了插值表达式都会出现闪现的情况。因为这些判断条件或者表达式执行之前，DOM已经渲染出来了，之后vue才会执行相应的代码
解决方案：
在js执行前先隐藏元素
如何隐藏呢？这里要和大家分享Vue的一个指令v-cloak。
v-cloak用法：这个指令保持在元素上直到关联实例结束编译。和CSS规则如[v-cloak] { display: none;}一起用时，就可以隐藏未编译的元素直到实例准备完毕
html部分:
<div id="box">
<span v-if="seen" v-cloak>现在你看到我了</span>
</div>
js部分：
data() {
return {
seen: false
}
}
css部分：
<style>
[v-cloak] {
display: none;
}
</style>
效果图：
load.gif
网友评论