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

Question

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

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

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

原文由 antoniputra 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

HTML：

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

CSS：

 [v-cloak] { display: none; }

原文由 Gus 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

我附上了以下代码笔。您可以看到有无 v-cloak 的区别。

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

---

http://codepen.io/gurghet/pen/PNLQwy

原文由 gurghet 发布，翻译遵循 CC BY-SA 3.0 许可协议