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

javascript vue.js

2022-08-30 01:35:36

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

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

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

答案 1

你可以使用 v-cloak 指令，它会隐藏 Vue 实例，直到编译完成，如果你把它与正确的 CSS 组合在一起。

网页：

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

CSS：

[v-cloak] { display: none; }

答案 2

我附上了以下密码笔。您可以看到使用和不使用的区别。v-cloak

<div id="js-app">
[regular]Hold it... <span>{{test}}</span><br/>
[cloak]Hold it... <span v-cloak>{{test}}</span>
</div>