Vue.js 显示用户刷新页面时应通过 v-if 标记隐藏的内容

Question

我有一个 Vue.js 应用程序，可以在方法中加载内容created()。我使用v-if标签隐藏所有 UI，直到内容加载完毕并准备就绪。它在初始加载时工作正常，但如果用户在 Chrome 中点击刷新，则应用程序会显示（短暂闪烁）否则不会显示的内容（基于创建时加载的数据）。

据我了解v-if，使用标签以及我的 vuex 存储中的一个标志来指示加载何时完成，是隐藏内容直到我准备好显示它的正确方法。

如何避免刷新时内容闪烁？

Answer 1

Vue.JS 使用指令解决了这个问题v-cloak。（参见文档）

您将该v-cloak指令添加到应用程序的根元素：

<div id="app" v-cloak>
...
</div>

然后将此 CSS 规则添加到应用程序的样式表中：

[v-cloak] {
  display: none;
}

div内的所有内容都app将被隐藏，直到 Vue 初始化。