小編給大家分享一下vue中v-cloak怎么解決刷新或者加載出現(xiàn)閃爍的問題，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

創(chuàng)新互聯(lián)公司是一家專注于成都做網(wǎng)站、成都網(wǎng)站設計與策劃設計,阜平網(wǎng)站建設哪家好?創(chuàng)新互聯(lián)公司做網(wǎng)站,專注于網(wǎng)站建設10多年,網(wǎng)設計領(lǐng)域的專業(yè)建站公司;建站業(yè)務涵蓋:阜平等地區(qū)。阜平做網(wǎng)站價格咨詢:18982081108

在使用vue綁定數(shù)據(jù)的時候，渲染頁面時會出現(xiàn)變量閃爍，例如

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

在加載的時候會看到

{{value.name}}

在頁面出現(xiàn)，過了幾秒之后才會渲染數(shù)據(jù)，在vue中有個指令可以解決這個問題，v-cloak

那么，v-cloak要放在什么位置呢，是不是每個需要渲染數(shù)據(jù)的標簽都要添加這個指令，經(jīng)過試驗發(fā)現(xiàn)，v-cloak并不需要添加到每個標簽，只要在el掛載的標簽上添加就可以，

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

而且，在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 標簽直到實例準備完畢。官方API

<div id="app">
  {{msg}}
</div>

HTML 綁定 Vue實例，在頁面加載時會閃爍

然后才會出現(xiàn) 加載完成 字樣，為了效果更明顯，我們可以延后加載 Vue 實例

setTimeout(() => {
  new Vue({
    el: '#app',
    data: {
      msg: 'hello'
    }
  })
},2000)

v-cloak 可以解決這一問題，在 css 中加上

[v-cloak] {
 display: none;
}

在 html 中的加載點加上 v-cloak，就可以解決這一問題

<div id="app" v-cloak>
  {{msg}}
</div>

 Vue1.x 與 Vue2 中 v-cloak 的不同

Vue1 中，允許將 Vue 實例掛載在 body 上，而 Vue2 是不允許的，想對整個頁面實例化，需要另外用一個 div 來容納整個頁面內(nèi)容，對其進行實例化

這樣在使用 v-cloak 時，同樣需要用到這種方法

 為什么我用的 v-cloak 無效？

在實際項目中，我們常通過 @import 來加載 css 文件

@import "style.css"
@import "index.css"

而 @import 是在頁面 DOM 完全載入后才會進行加載，如果我們將 [v-cloak] 寫在 @import 加載的 css 文件中，就會導致頁面仍舊閃爍。

為了避免這種情況，我們可以將 [v-cloak] 寫在 link 引入的 css 中，或者寫一個內(nèi)聯(lián) css 樣式，這樣就得到了解決。

以上是“vue中v-cloak怎么解決刷新或者加載出現(xiàn)閃爍的問題”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學習更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

本文名稱：vue中v-cloak怎么解決刷新或者加載出現(xiàn)閃爍的問題
網(wǎng)站網(wǎng)址：http://jinyejixie.com/article22/ipegjc.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供動態(tài)網(wǎng)站、域名注冊、響應式網(wǎng)站、自適應網(wǎng)站、網(wǎng)站設計公司、虛擬主機

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)