Directiva v-else-if de Vue3
v-else-ifLa directiva se utiliza para representar el bloque else if de v-if y se puede encadenar para formar múltiples condiciones.
Descripción básica
v-else-ifLa directiva debe colocarse inmediatamente después de un elemento v-if u otro v-else-if, indicando otra condición de juicio cuando la condición anterior no se cumple.
- Tipo esperado: any
- FunciónIndica el bloque else if de v-if; debe ir precedida de un v-if o v-else-if. Se puede encadenar.
Uso básico
Ejemplo
<template>
<div>
<div v-if="type === 'A'">Tipo A</div>
<div v-else-if="type === 'B'">Tipo B</div>
<div v-else-if="type === 'C'">Tipo C</div>
<div v-else>Otros tipos</div>
</div>
</template>
<script>
export default {
data() {
return { type: 'B' }
}
}
</script>
<div>
<div v-if="type === 'A'">Tipo A</div>
<div v-else-if="type === 'B'">Tipo B</div>
<div v-else-if="type === 'C'">Tipo C</div>
<div v-else>Otros tipos</div>
</div>
</template>
<script>
export default {
data() {
return { type: 'B' }
}
}
</script>
Otras extensiones
Directivas integradas de Vue3