vue.js 有v型斗篷的反作用吗

jq6vz3qz  于 2023-04-07  发布在  Vue.js
关注(0)|答案(3)|浏览(140)

根据VueJS文档,v-cloak“指令可以用来隐藏未编译的mustache绑定,直到Vue示例准备就绪。”换句话说,我可以隐藏div或类似的东西,当vue准备就绪时,它会显示出来。
VueJS是否提供了它的反版本?在VueJS准备好之前隐藏 * 的东西?

ilmyapht

ilmyapht1#

就像这样简单:

<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>
kupeojn6

kupeojn62#

有很多解决方案,我认为另一个解决方案是在data中使用带有false属性的v-if,如:

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

j5fpnvbx3#

下面是我所做的,它不需要在应用程序中“反转”

<div id="app" v-cloak>...</div>
<div id="cloak-alt">  <!-- must be directly after your v-cloak element -->
  Loading Page etc
</div>
[v-cloak] {
  display: none;
}

#cloak-alt {
  display: none;
}

[v-cloak] + #cloak-alt {
  /* As long as this is visible, display can be whatever */
  display: block;
}

这是IMO在加载Vue时隐藏整个页面的最佳方法,v-if="false"让我感觉有点笨拙,但它可以在应用程序中隐藏一些组件;但是,您可以使用不同的css选择器使用相同的方法来完成相同的事情

相关问题