在項目在開發中,經常會遇到當數據加載時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文件里或者內聯樣式中