vue -- v-cloak解決重新整理或者載入出現閃爍（顯示變數）

李文楊發表於2017-09-23
Vue變數

在使用vue繫結資料的時候，渲染頁面時會出現變數閃爍，例如

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

在載入的時候會看到

{{value.name}}

在頁面出現，過了幾秒之後才會渲染資料，在vue中有個指令可以解決這個問題，v-cloak

v-cloak要放在什麼位置呢，是不是每個需要渲染資料的標籤都要新增這個指令，經過我的試驗發現，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檔案裡或者內聯樣式中

相關文章