Question

我使用vue.js来显示一些绑定变量。我页面的骨架是

<body>
<!-- the content of the page, including an instance of the variable {{hello}} -->
<script src="vue.js"></script>
<script src="myscript.js"></script>
</body>

打开页面时，页面会显示{{hello}}的短暂时刻，紧接着后面的变量hello的正确值。

在初始化变量并显示其值之前，延迟显示页面的正确方法（如果有的话）是什么？

我相信这是由于Vue's asynchronous nature（当第一次渲染发生时队列还没有刷新）但我确实知道如何在页面打开时隐藏这个未刷新的阶段。

Answer 1

您可以使用v-cloak，以下是使用方式：

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

示例： CSS：

[v-cloak] { display: none; }

HTML：

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

如果您了解Angular，这与ng-cloak非常相似。

如何在刷新vue变量之前延迟页面的呈现？

1 个答案: