vue中v-cloak解決刷新或者加載出現(xiàn)閃爍問(wèn)題（顯示變量）

更新時(shí)間：2018年04月20日 17:03:18 投稿：mrr

這篇文章主要介紹了vue中v-cloak解決刷新或者加載出現(xiàn)閃爍問(wè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)，過(guò)了幾秒之后才會(huì)渲染數(shù)據(jù)，在vue中有個(gè)指令可以解決這個(gè)問(wèn)題，v-cloak

那么，v-cloak要放在什么位置呢，是不是每個(gè)需要渲染數(shù)據(jù)的標(biāo)簽都要添加這個(gè)指令，經(jīng)過(guò)試驗(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 可以解決這一問(wèn)題，在 css 中加上

[v-cloak] {
 display: none;
}

在 html 中的加載點(diǎn)加上 v-cloak，就可以解決這一問(wèn)題

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

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

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

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

為什么我用的 v-cloak 無(wú)效？

在實(shí)際項(xiàng)目中，我們常通過(guò) @import 來(lái)加載 css 文件

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

而 @import 是在頁(yè)面 DOM 完全載入后才會(huì)進(jìn)行加載，如果我們將 [v-cloak] 寫(xiě)在 @import 加載的 css 文件中，就會(huì)導(dǎo)致頁(yè)面仍舊閃爍。

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

總結(jié)

以上所述是小編給大家介紹的vue中v-cloak解決刷新或者加載出現(xiàn)閃爍問(wèn)題（顯示變量），希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章:

相關(guān)文章

vue3使用vuedraggable和grid實(shí)現(xiàn)自定義拖拽布局方式
這篇文章主要介紹了vue3使用vuedraggable和grid實(shí)現(xiàn)自定義拖拽布局方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-06-06
vue?axios中的get請(qǐng)求方式
這篇文章主要介紹了vue?axios中的get請(qǐng)求方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-07-07
如何用vue-cli3腳手架搭建一個(gè)基于ts的基礎(chǔ)腳手架的方法
這篇文章主要介紹了如何用vue-cli3腳手架搭建一個(gè)基于ts的基礎(chǔ)腳手架的方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-12-12
Vue使用el-upload批量上傳圖片時(shí)報(bào)錯(cuò)問(wèn)題處理方法
相信大家都知道在element-ui中,el-upload可以進(jìn)行文件多選操作,下面這篇文章主要給大家介紹了關(guān)于Vue使用el-upload批量上傳圖片時(shí)報(bào)錯(cuò)問(wèn)題的處理方法,文中通過(guò)圖文以及實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2023-06-06
VUE 項(xiàng)目在IE11白屏報(bào)錯(cuò) SCRIPT1002: 語(yǔ)法錯(cuò)誤的解決
這篇文章主要介紹了VUE 項(xiàng)目在IE11白屏報(bào)錯(cuò) SCRIPT1002: 語(yǔ)法錯(cuò)誤的解決，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2020-09-09
Vue實(shí)現(xiàn)當(dāng)前頁(yè)面刷新的五種方法總結(jié)
這篇文章主要介紹了Vue中實(shí)現(xiàn)頁(yè)面刷新的5種方法,包括使用$router.go(0)、location.reload()、通過(guò)router-view的key屬性、使用v-if指令手動(dòng)觸發(fā)組件重新渲染,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下
2025-02-02
elementplus?中?DatePicker?日期選擇器樣式修改無(wú)效的問(wèn)題及解決方案
這篇文章主要介紹了elementplus中DatePicker日期選擇器樣式修改無(wú)效的問(wèn)題,DatePicker日期選擇器彈出面板默認(rèn)掛載在body上,所以在組件中添加了?scoped?屬性的?style?標(biāo)簽下是修改不到其樣式的,講解了datepicker的使用方法,及常見(jiàn)的配置項(xiàng)和對(duì)應(yīng)的值,需要的朋友可以參考下
2024-01-01
Vue項(xiàng)目webpack打包部署到Tomcat刷新報(bào)404錯(cuò)誤問(wèn)題的解決方案
今天很郁悶，遇到這樣一個(gè)奇葩問(wèn)題，使用webpack打包vue后，將打包好的文件，發(fā)布到Tomcat上，訪問(wèn)成功，但是刷新后頁(yè)面報(bào)404錯(cuò)誤，折騰半天才解決好，下面小編把Vue項(xiàng)目webpack打包部署到Tomcat刷新報(bào)404錯(cuò)誤問(wèn)題的解決方案分享給大家，需要的朋友一起看看吧
2018-05-05
vue項(xiàng)目在env文件中設(shè)置的變量無(wú)效問(wèn)題及解決
這篇文章主要介紹了vue項(xiàng)目在env文件中設(shè)置的變量無(wú)效問(wèn)題及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-03-03
elementui[el-table]toggleRowSelection默認(rèn)多選事件無(wú)法選中問(wèn)題
這篇文章主要介紹了elementui[el-table]toggleRowSelection默認(rèn)多選事件無(wú)法選中問(wèn)題及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2023-11-11