vue.js - vue v-if 开始隐藏

Question

我在标签 <span v-if="someValue"> 上有一个 v-if我想开始隐藏，只有在 someValue 中的值出现后才可见设置为真。不幸的是，即使一开始值为 false，它在加载页面时仍然会闪烁(可能在 Vue 有时间删除标签之前)。有什么好的方法可以解决这个问题吗？

Answer 1

最初的“闪烁”实际上与v-if无关。

这是因为你先加载了dom，然后vue js会“操纵”它。 Vue 在您的 html 标记之后加载，因此您将看到所有内容，直到最终加载 vue js 并将根据您的代码隐藏元素。

要摆脱这个，你可以在你的一个外部元素上放置一个 v-cloak 指令并添加一个 css，比如

[v-cloak].class-of-my-outer-element {
   display: none;
}

v-cloak“属性”在初始化后会被vue移除。这意味着在您的代码准备好之前不会显示任何内容。

次要更新/编辑:如果您的#app 或任何安装 vue 应用程序的地方，请不要忘记 v-cloak 元素需要在里面。