如何在页面加载时隐藏 VueJS 语法?

本文介绍了如何在页面加载时隐藏 VueJS 语法?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

也许这是一个微不足道的问题.

因此，当我在浏览器上运行我的 vuejs 应用程序时，启用限制下载速度(设置为低连接).我在浏览器中得到了未完成的 vue 语法输出.

我知道我们可以通过在整个页面加载之前显示加载图像来解决这个问题，但是有没有最好的解决方案来解决这个问题?

解决方案

您可以使用 v-cloak 指令，如果你将它与正确的 CSS 结合起来，它将隐藏 Vue 实例直到编译完成.

HTML:

{{ message }}

CSS:

[v-cloak] { display: none;}

maybe this is a trivial question.

so, when I run my vuejs application on browser with enables throttling download speed (sets to low connection). I got unfinished vue syntax output in browser.

I know we can trick this out with showing loading image before entire page has loaded, but it's there any best solution to fix this?

解决方案

You can use the v-cloak directive, which will hide the Vue instance until the compilation finishes, if you combine it with the right CSS.

HTML:

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

CSS:

[v-cloak] { display: none; }