使用 v-cloak 防止页面加载时出现 vuejs 的变量名

使用 vuejs 做了一个简单的功能页面，逻辑是，页面加载后获取当前的经纬度，然后通过 ajax 从后台拉取附近的小区列表。但是 bug 出现了，在显示小区列表之前，会闪现小区名对应的 vuejs 变量名。

案发现场的 HTML 代码

<ul v-for="item in items">
  <li>{{ item.name }}</li>
</ul>

页面加载时，会闪现

{{ item.name }}

Google 了一下，发现 vuejs 内置的 directive v-cloak 可以解决这个问题。非常简单

HTML 修改成

<ul v-cloak v-for="item in items">
  <li>{{ item.name }}</li>
</ul>

CSS 中添加

[v-cloak] {
  display: none;
}