跳到主要内容

v-cloak

一、认识​

v-cloak 用于隐藏尚未完成编译的 DOM 模板。该指令只在没有构建步骤的环境下需要使用。

当使用直接在 DOM 中书写的模板时，可能会出现一种叫做“未编译模板闪现”的情况：用户可能先看到的是还没编译完成的双大括号标签，直到挂载的组件将它们替换为实际渲染的内容。

v-cloak 会保留在所绑定的元素上，直到相关组件实例被挂载后才移除。配合像 [v-cloak] display: none 这样的 CSS 规则，它可以在组件编译完毕前隐藏原始模板。

二、语法​

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

<style>
    [v-cloak] {
        display: none;
    }
</style>

直到编译完成前，<div> 将不可见。