vue中v-cloak解決刷新或者加載出現閃爍（顯示變量）

 

在使用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文件里或者內聯樣式中

 

文章轉自:http://blog.csdn.net/bobobocai/article/details/70676951