關於Vue.js 使用v-cloak后仍顯示變量的解決方法

v-cloak   這個指令是防止頁面加載時出現 vuejs 的變量名而設計的，但有時候添加了這個指令仍會顯示變量，這是怎么回事呢？。

v-cloak 用法：

HTML代碼：

<div v-cloak>
  {{ message }}
</div>

CSS代碼：

[v-cloak] {
  display: none;
}

這樣直至div內變量編譯完畢后才會顯示。

但有時添加完畢后仍有部分變量會顯示，這是怎么回事呢？通過控制台查看，原來是 v-cloak 的display屬性被優先級別高的樣式覆蓋所導致，我的處理方案是添加 !important ，簡單粗暴。新css樣式如下：

[v-cloak] {
  display:none !important;
}

經測試，並不會產生副作用。如果大家有更好的方案，歡迎交流。相關截圖如下：

未使用 !important 前的截圖

相關鏈接：

1. Vue.js 1.0官網 v-cloak說明