使用 v-cloak 防止頁面加載時出現 vuejs 的變量名

先來看一段代碼：

<ul v-for="item in items">

      <li>{{ item.name }}</li>

</ul>

當咱們刷新頁面的時候由於響應問題會看到 {{item.name}} 這個vue.js模板變量，這樣給用戶帶來了很差的體驗，那麼要怎麼解決這個問題呢？

答案就是加上一個：

v-cloak  

代碼以下：

<ul v-cloak v-for="item in items">

     <li>{{ item.name }}</li>

</ul>

而後在css中添加

[v-cloak] {

     display: none;

}

搞定！

可是原理是什麼呢？

這段 CSS 的含義是，包含 v-cloak (cloak n. 披風，斗篷；vt. 遮蓋，掩蓋) 屬性的 html 標籤在頁面初始化時會被隱藏。

在 vuejs instance ready 以後，v-cloak 屬性會被自動去除，也就是對應的標籤會變爲可見。