是否有 v-cloak 逆？

Posted 2023-02-23

【中文标题】是否有 v-cloak 逆？

【英文标题】：Is there a v-cloak inverse?

【发布时间】：2018-03-22 18:16:48

【问题描述】：

根据VueJS documentation，v-cloak“指令可用于隐藏未编译的胡子绑定，直到 Vue 实例准备好。”。也就是说，我可以隐藏一个div之类的东西，当vue准备好时就会显示出来。

VueJS 是否提供逆向？隐藏的东西直到 VueJS 准备好了？

【问题讨论】：

您的意思是在编译实例之前将显示的内容？

@Vivick 是的！没错。

只需在 CSS 中隐藏元素，并使其在 created 或 mounted 生命周期挂钩中可见？

【参考方案1】：

有很多解决方案，我认为另一种解决方案是使用 v-if 和 data 中的错误属性，例如：

<div v-if="false">Loading Vue....</div>
<div v-cloak>vue loaded</div>

【参考方案2】：

就这么简单：

<div v-if="false">Will be visible until vue is mounted/ready...</div>

适用于所有版本。

元素必须在你的容器内...如果你用来隐藏你的主容器，那么改变它：

<div id="app">
    <div v-if="false">Visible while loading...</div>
    <div v-cloak>Visible when ready...</div>
</div>

【讨论】：

希望所有的答案都是这样的！非常简单、漂亮和优雅的解决方案

感谢分享这个很棒的解决方案！