vue加載顯示{{xxx}}的解決方法 v-cloak

一般vue.js文件放在最后，由於瀏覽器是從頭到尾的渲染機制，在沒有讀取到識別符對應的js控制語句就會直接顯示{{xxx}}

這個問題可以用vue的一個特點解決，就是Vue會自動屏蔽掉自定義屬性

我們可以為對應的dom節點添加一個自定義屬性，比如 dom-hidden（官方：v-cloak）

然后css定義 ：    [dom-hidden]{ display:none;}

這個屬性在vue加載完成后被忽略，於是就解決了加載慢的問題。

v-cloak

v-cloak：保持和元素實例的關聯，直到結束編譯后自動消失。

v-cloak指令和CSS 規則一起用的時候，能夠解決差值表達式閃爍的問題（即：可以隱藏未編譯的標簽直到實例准備完畢）。

解決辦法是：通過v-cloak隱藏{{name}}這個內容，當加載完畢后，再顯示出來。

• 用法：

  這個指令保持在元素上直到關聯實例結束編譯。和 CSS 規則如 [v-cloak] { display: none } 一起用時，這個指令可以隱藏未編譯的 Mustache 標簽直到實例准備完畢。

• 示例：

[v-cloak] {
  display: none;
}

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

不會顯示，直到編譯結束。

 

當有彈出層用 v-if 判斷是否顯示，刷新網速慢時會閃現彈出層問題，也可以用上述方法解決。