這次帶給大家如何使用vue中v-cloak解決刷新或載入出現閃爍，使用vue中v-cloak解決刷新或載入出現閃爍的注意事項有哪些，以下就是實戰案例，一起來看一下。
<p class="#app">
<p>{{value.name}}</p>
</p>在載入的時候會看到
{{value.name}}
在頁面出現，過了幾秒後才會渲染數據，在vue中有個指令可以解決這個問題，v-cloak
那麼，v-cloak要放在什麼位置呢，是不是每個需要渲染數據的標籤都要添加這個指令，經過試驗發現，v-cloak並不需要加到每個標籤，只要在el掛載的標籤上添加就可以，
<p class="#app" v-cloak>
<p>{{value.name}}</p>
</p>而且，在css裡面要添加
[v-cloak] {
display: none;
}這樣就可以防止頁面閃爍了。
但是有的時候會不起作用，可能的原因有二：
1、v-cloak的display屬性被層級更高的給覆蓋掉了，所以要提高層級
[v-cloak] {
display: none !important;
}2、樣式放在了@import引入的css檔案中
v-cloak的這個樣式放在@import 引入的css檔案中不起作用，可以放在link引入的css檔案裡或內聯樣式中
補充：
下面看下Vue 中的v -cloak 解讀
v-cloak 的作用與用法
用法：
這個指令保持在元素上直到關聯實例結束編譯。和 CSS 規則如 [v-cloak] { display: none } 一起用時，這個指令可以隱藏未編譯的 Mustache 標籤直到實例準備完畢。官方API
<p id="app">
{{msg}}
</p>HTML 綁定Vue實例，在頁面載入時會閃爍
然後才會出現載入完成字樣，為了效果更明顯，我們可以延遲載入Vue 實例
setTimeout(() => {
new Vue({
el: '#app',
data: {
msg: 'hello'
}
})
},2000)v-cloak 可以解決這個問題，在css 中加上
[v-cloak] {
display: none;
}在html 中的載入點加上v-cloak，就可以解決這一問題
<p id="app" v-cloak>
{{msg}}
</p>Vue1.x 與Vue2 中v-cloak 的不同
Vue1 中，允許將Vue 實例掛載在body 上，而Vue2 是不允許的，想對整個頁面實例化，需要另外用一個p 來容納整個頁面內容，對其進行實例化
這樣在使用v-cloak 時，同樣需要用到這種方法
為什麼我用的v-cloak 無效？
在實際專案中，我們常透過@import 來載入css 檔案
@import "style.css" @import "index.css"
而@import 是在頁面DOM 完全載入後才會進行載入，如果我們將[ v-cloak] 寫在@import 載入的css 檔案中，就會導致頁面仍舊閃爍。
為了避免這種情況，我們可以將 [v-cloak] 寫在 link 引入的 css 中，或者寫一個內聯 css 樣式，這樣就得到了解決。
相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！
推薦閱讀：
以上是如何使用vue中v-cloak解決刷新或載入出現閃爍的詳細內容。更多資訊請關注PHP中文網其他相關文章！
