在使用 vue 時(shí)，綁定 Vue 實(shí)例，在頁(yè)面刷新或加載時(shí)會(huì)閃爍類(lèi)似{{ message }}這樣的信息。

使用 v-cloak 可以解決該問(wèn)題

怎么使用？

官方用法

<style>
  [v-cloak] {
    display: none;
  }
</style>

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

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

可能的原因有二：

1、v-cloak 的 display 屬性被權(quán)重更高的 display 覆蓋了，所以需要增加權(quán)重

<style>
  [v-cloak] {
    display: none !important;
  }
</style>

2、樣式放在了@import 引入的 css 文件中

@import "./style.css";

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

<link rel="stylesheet" href="./style.css" />

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