vue 解決頁面加載時閃爍出現vue標簽或者指令的問題v-cloak


在項目在開發中,經常會遇到當數據加載時vue的一些標簽就會閃現,然后等數據加載完后消失,還有一種情況就是使用v-show v-if來顯示隱藏一些元素時,在頁面初始化時會閃現那些本來想要隱藏元素,這時候就需要用到官網中提到的v-cloak來解決。

解決辦法

那么,v-cloak要放在什么位置呢,是不是每個需要渲染數據的標簽都要添加這個指令,經過試驗發現,v-cloak並不需要添加到每個標簽,只要在el掛載的標簽上添加就可以,這是最簡單有效的辦法

<div class="#app" v-cloak>
    <p>{{value.name}}</p>
</div>

  然后,在css里面要添加

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

  這樣就可以防止頁面閃爍了。

但是有的時候會不起作用,可能的原因:

樣式放在了@import引入的css文件中(傳統的開發方式)

v-cloak的這個樣式放在@import 引入的css文件中不起作用,可以放在link引入的css文件里或者內聯樣式中

 




免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM