Directive v-else-if de Vue3
v-else-ifCette directive est utilisée pour représenter le bloc else if de v-if, et peut être chaînée pour former des jugements multi-conditions.
Description de base
v-else-ifLa directive doit suivre immédiatement un élément v-if ou un autre élément v-else-if, représentant une autre condition à vérifier lorsque la condition précédente n'est pas remplie.
- Type attendu: any
- Fonction: Représente le bloc else if de v-if, doit être précédée par v-if ou v-else-if. Peut être chaînée.
Utilisation de base
Exemple
<template>
<div>
<div v-if="type === 'A'">Type A</div>
<div v-else-if="type === 'B'">Type B</div>
<div v-else-if="type === 'C'">Type C</div>
<div v-else>Autres types</div>
</div>
</template>
<script>
export default {
data() {
return { type: 'B' }
}
}
</script>
<div>
<div v-if="type === 'A'">Type A</div>
<div v-else-if="type === 'B'">Type B</div>
<div v-else-if="type === 'C'">Type C</div>
<div v-else>Autres types</div>
</div>
</template>
<script>
export default {
data() {
return { type: 'B' }
}
}
</script>
Autres extensions
Vue3 Directives intégrées