Selon la directive VueJS documentation, v-cloak "La directive peut être utilisée pour masquer les liaisons de moustache non compilées jusqu'à ce que l'instance de Vue soit prête.". En d'autres termes, je peux cacher un div ou quelque chose comme ça, et il sera affiché lorsque la vue est prête.Y a-t-il un inverse v-manteau?
Est-ce que VueJS fournit son inverse? Quelque chose qui cache jusqu'à VueJS est prêt?
Aussi simple que:
<div v-if="false">Will be visible until vue is mounted/ready...</div>
travail pour toutes les versions.
L'élément doit être à l'intérieur de votre récipient ... si vous utilisez pour cacher votre conteneur principal, changer cette façon:
<div id="app">
<div v-if="false">Visible while loading...</div>
<div v-cloak>Visible when ready...</div>
</div>
Une solution consisterait à afficher d'abord du code HTML pur, puis à utiliser l'événement mounted pour le retirer du DOM lorsqu'il est monté.
Il peut également y avoir des plugins à cet effet.
Il beaucoup de solutions, je pense qu'une autre ne sera d'utiliser v-if avec un faux propriété data comme:
<template>
<div v-if="hideWhenVueIsUp">Loading Vue....</div>
</template>
<script>
export default {
data: {
return {
hideWhenVueIsUp: false
}
}
}
</script>
Avez-vous dire quelque chose qui sera affiché tant que l'instance est compilé? – Vivick
@Vivick Oui! Exactement. –
Cacher simplement l'élément dans votre CSS, et le rendre visible dans les hooks de cycle de vie 'created' ou' mounted'? – Terry