vue中v-cloak如何解決刷新或者加載出現(xiàn)閃爍的問題
這篇文章主要介紹“vue中v-cloak如何解決刷新或者加載出現(xiàn)閃爍的問題”的相關(guān)知識，小編通過實際案例向大家展示操作過程，操作方法簡單快捷，實用性強，希望這篇“vue中v-cloak如何解決刷新或者加載出現(xiàn)閃爍的問題”文章能幫助大家解決問題。
10年積累的網(wǎng)站建設(shè)、成都網(wǎng)站設(shè)計經(jīng)驗，可以快速應(yīng)對客戶對網(wǎng)站的新想法和需求。提供各種問題對應(yīng)的解決方案。讓選擇我們的客戶得到更好、更有力的網(wǎng)絡(luò)服務(wù)。我雖然不認(rèn)識你，你也不認(rèn)識我。但先網(wǎng)站制作后付款的網(wǎng)站建設(shè)流程，更有達孜免費網(wǎng)站建設(shè)讓你可以放心的選擇與我們合作。
在使用vue綁定數(shù)據(jù)的時候，渲染頁面時會出現(xiàn)變量閃爍，例如
{{value.name}}
在加載的時候會看到
{{value.name}}
在頁面出現(xiàn)，過了幾秒之后才會渲染數(shù)據(jù)，在vue中有個指令可以解決這個問題，v-cloak
那么，v-cloak要放在什么位置呢，是不是每個需要渲染數(shù)據(jù)的標(biāo)簽都要添加這個指令，經(jīng)過試驗發(fā)現(xiàn)，v-cloak并不需要添加到每個標(biāo)簽，只要在el掛載的標(biāo)簽上添加就可以，
{{value.name}}
而且，在css里面要添加
[v-cloak] {
display: none;
}這樣就可以防止頁面閃爍了。
但是有的時候會不起作用，可能的原因有二：
1、v-cloak的display屬性被層級更高的給覆蓋掉了，所以要提高層級
[v-cloak] {
display: none !important;
}2、樣式放在了@import引入的css文件中
v-cloak的這個樣式放在@import 引入的css文件中不起作用，可以放在link引入的css文件里或者內(nèi)聯(lián)樣式中
補充：
下面看下Vue 中的 v-cloak 解讀
v-cloak 的作用和用法
用法：
這個指令保持在元素上直到關(guān)聯(lián)實例結(jié)束編譯。和 CSS 規(guī)則如 [v-cloak] { display: none } 一起用時，這個指令可以隱藏未編譯的 Mustache 標(biāo)簽直到實例準(zhǔn)備完畢。官方API
{{msg}}
Vue1 中，允許將 Vue 實例掛載在 body 上，而 Vue2 是不允許的，想對整個頁面實例化，需要另外用一個 div 來容納整個頁面內(nèi)容，對其進行實例化
而 @import 是在頁面 DOM 完全載入后才會進行加載，如果我們將 [v-cloak] 寫在 @import 加載的 css 文件中，就會導(dǎo)致頁面仍舊閃爍。
關(guān)于“vue中v-cloak如何解決刷新或者加載出現(xiàn)閃爍的問題”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識，可以關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，小編每天都會為大家更新不同的知識點。
重慶分公司
重慶分公司
