在開(kāi)發(fā)的時(shí)候,經(jīng)常會(huì)遇到頁(yè)面不該出現(xiàn)的內(nèi)容會(huì)閃現(xiàn)一下然后消失命浴,研究了一下這個(gè)問(wèn)題的原因和解決方案娄猫,在這里寫(xiě)了一個(gè)簡(jiǎn)單的demo跟大家分享一下
閃現(xiàn)演示:
閃現(xiàn)原因:
vue要等到DOM加載完畢之后才執(zhí)行js的編譯,所以對(duì)使用了指令(比如v-if,v-show)或者使用了插值表達(dá)式都會(huì)出現(xiàn)閃現(xiàn)的情況稚新。因?yàn)檫@些判斷條件或者表達(dá)式執(zhí)行之前勘伺,DOM已經(jīng)渲染出來(lái)了,之后vue才會(huì)執(zhí)行相應(yīng)的代碼
解決方案:
在js執(zhí)行前先隱藏元素
如何隱藏呢褂删?這里要和大家分享Vue的一個(gè)指令v-cloak飞醉。
v-cloak用法:這個(gè)指令保持在元素上直到關(guān)聯(lián)實(shí)例結(jié)束編譯。和CSS規(guī)則如[v-cloak] { display: none;}一起用時(shí)屯阀,就可以隱藏未編譯的元素直到實(shí)例準(zhǔn)備完畢
html部分:
<div id="box">
<span v-if="seen" v-cloak>現(xiàn)在你看到我了</span>
</div>
js部分:
data() {
return {
seen: false
}
}
css部分:
<style>
[v-cloak] {
display: none;
}
</style>
效果圖: