Directive v-if de Vue3
Vue3 Directives intégréesv-ifLa directive est utilisée pour le rendu conditionnel, en décidant s'il faut rendre un élément ou un fragment de template selon la véracité de l'expression.
Description de base
v-ifLa directive effectue un rendu conditionnel d'un élément en fonction de la véracité de l'expression liée. Lorsque la condition est vraie, l'élément est rendu dans le DOM ; lorsqu'elle est fausse, l'élément n'est pas rendu.
- Type attendu: any
- Objectif: rendu conditionnel ; décide s'il faut rendre l'élément en fonction de la véracité de l'expression. Lorsque la condition est fausse, aucun DOM n'est rendu.
Utilisation de base
Exemple
<template>
<div>
<p v-if="isLoggedIn">Bon retour, utilisateur</p>
<p v-else>Veuillez vous connecter</p>
</div>
</template>
<script>
export default {
data() {
return { isLoggedIn: true }
}
}
</script>
<div>
<p v-if="isLoggedIn">Bon retour, utilisateur</p>
<p v-else>Veuillez vous connecter</p>
</div>
</template>
<script>
export default {
data() {
return { isLoggedIn: true }
}
}
</script>
Combinaison avec v-else et v-else-if
v-if peut être utilisé avec v-else-if et v-else pour former une chaîne conditionnelle :
Exemple
<div v-if="status === 'loading'">Chargement...</div>
<div v-else-if="status === 'error'">Échec du chargement</div>
<div v-else>Contenu : {{ data }}</div>
<div v-else-if="status === 'error'">Échec du chargement</div>
<div v-else>Contenu : {{ data }}</div>
Autres extensions