您好,登錄后才能下訂單哦!
這篇文章主要介紹“vue中v-cloak如何解決刷新或者加載出現(xiàn)閃爍的問題”的相關(guān)知識(shí),小編通過實(shí)際案例向大家展示操作過程,操作方法簡(jiǎn)單快捷,實(shí)用性強(qiáng),希望這篇“vue中v-cloak如何解決刷新或者加載出現(xiàn)閃爍的問題”文章能幫助大家解決問題。
在使用vue綁定數(shù)據(jù)的時(shí)候,渲染頁(yè)面時(shí)會(huì)出現(xiàn)變量閃爍,例如
<div class="#app"> <p>{{value.name}}</p> </div>
在加載的時(shí)候會(huì)看到
{{value.name}}
在頁(yè)面出現(xiàn),過了幾秒之后才會(huì)渲染數(shù)據(jù),在vue中有個(gè)指令可以解決這個(gè)問題,v-cloak
那么,v-cloak要放在什么位置呢,是不是每個(gè)需要渲染數(shù)據(jù)的標(biāo)簽都要添加這個(gè)指令,經(jīng)過試驗(yàn)發(fā)現(xiàn),v-cloak并不需要添加到每個(gè)標(biāo)簽,只要在el掛載的標(biāo)簽上添加就可以,
<div class="#app" v-cloak> <p>{{value.name}}</p> </div>
而且,在css里面要添加
[v-cloak] { display: none; }
這樣就可以防止頁(yè)面閃爍了。
但是有的時(shí)候會(huì)不起作用,可能的原因有二:
1、v-cloak的display屬性被層級(jí)更高的給覆蓋掉了,所以要提高層級(jí)
[v-cloak] { display: none !important; }
2、樣式放在了@import引入的css文件中
v-cloak的這個(gè)樣式放在@import 引入的css文件中不起作用,可以放在link引入的css文件里或者內(nèi)聯(lián)樣式中
補(bǔ)充:
下面看下Vue 中的 v-cloak 解讀
v-cloak 的作用和用法
用法:
這個(gè)指令保持在元素上直到關(guān)聯(lián)實(shí)例結(jié)束編譯。和 CSS 規(guī)則如 [v-cloak] { display: none } 一起用時(shí),這個(gè)指令可以隱藏未編譯的 Mustache 標(biāo)簽直到實(shí)例準(zhǔn)備完畢。官方API
<div id="app"> {{msg}} </div>
HTML 綁定 Vue實(shí)例,在頁(yè)面加載時(shí)會(huì)閃爍
然后才會(huì)出現(xiàn) 加載完成 字樣,為了效果更明顯,我們可以延后加載 Vue 實(shí)例
setTimeout(() => { new Vue({ el: '#app', data: { msg: 'hello' } }) },2000)
v-cloak 可以解決這一問題,在 css 中加上
[v-cloak] { display: none; }
在 html 中的加載點(diǎn)加上 v-cloak,就可以解決這一問題
<div id="app" v-cloak> {{msg}} </div>
Vue1.x 與 Vue2 中 v-cloak 的不同
Vue1 中,允許將 Vue 實(shí)例掛載在 body 上,而 Vue2 是不允許的,想對(duì)整個(gè)頁(yè)面實(shí)例化,需要另外用一個(gè) div 來容納整個(gè)頁(yè)面內(nèi)容,對(duì)其進(jìn)行實(shí)例化
這樣在使用 v-cloak 時(shí),同樣需要用到這種方法
為什么我用的 v-cloak 無效?
在實(shí)際項(xiàng)目中,我們常通過 @import 來加載 css 文件
@import "style.css" @import "index.css"
而 @import 是在頁(yè)面 DOM 完全載入后才會(huì)進(jìn)行加載,如果我們將 [v-cloak] 寫在 @import 加載的 css 文件中,就會(huì)導(dǎo)致頁(yè)面仍舊閃爍。
為了避免這種情況,我們可以將 [v-cloak] 寫在 link 引入的 css 中,或者寫一個(gè)內(nèi)聯(lián) css 樣式,這樣就得到了解決。
關(guān)于“vue中v-cloak如何解決刷新或者加載出現(xiàn)閃爍的問題”的內(nèi)容就介紹到這里了,感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí),可以關(guān)注億速云行業(yè)資訊頻道,小編每天都會(huì)為大家更新不同的知識(shí)點(diǎn)。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。