使用 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 属性会被自动去除，也就是对应的标签会变为可见。