如何在页面处于加载状态时摆脱vuejs中的{{user.id}}（花括号）

Question

我在我的项目中使用了vuejs并注意到当页面处于加载状态时，我看到这样的{{ user.id }} {{ user.name }}非常烦人。 页面完全加载后，我可以正确看到userId和user name。

如何在页面处于加载状态时停止显示vuejs的这些大括号？

Answer 1

为此目的建立了一个指令：v-cloak。 http://vuejs.org/api/#v-cloak

  

该指令将保留在元素上，直到关联的Vue实例完成编译。结合[v-cloak] { display: none }等CSS规则，该指令可用于隐藏未编译的胡须绑定，直到Vue实例准备就绪。

[v-cloak] {
  display: none;
}

<div v-cloak>
  {{ message }}
</div>