当页面处于加载状态时，如何在 vuejs 中摆脱这个 {{ user.id }} (花括号) [英] how to get rid of this {{ user.id }} (curly braces) in vuejs while a page is in loading state

问题描述

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

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

解决方案

有一个为此目的而构建的指令:v-cloak.http://vuejs.org/api/#v-cloak

<块引用>

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

[v-cloak] {显示:无；}

{{ 信息 }}

I'm using vuejs in my project and noticed that when a page is in loading state, I see something like this {{ user.id }} {{ user.name }} which is very annoying.
And after the page is fully loaded, I can see the userId and user name properly.

How to stop showing the these curly braces of vuejs in a page while it is in loading state?

解决方案

There is a directive built for this purpose: v-cloak. http://vuejs.org/api/#v-cloak

This directive will remain on the element until the associated Vue instance finishes compilation. Combined with CSS rules such as [v-cloak] { display: none }, this directive can be used to hide un-compiled mustache bindings until the Vue instance is ready.

[v-cloak] {
  display: none;
}

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

这篇关于当页面处于加载状态时，如何在 vuejs 中摆脱这个 {{ user.id }} (花括号)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！