Directiva v-if de Vue3
Directivas integradas de Vue3v-ifLa directiva se utiliza para el renderizado condicional. Según el valor de verdad de la expresión, decide si se renderiza el elemento o un fragmento de plantilla.
Descripción básica
v-ifLa directiva renderiza condicionalmente el elemento según el valor de verdad de la expresión enlazada. Cuando la condición es verdadera, el elemento se renderiza en el DOM; cuando es falsa, no se renderiza.
- Tipo esperado: any
- Función: Renderizado condicional, determina si se renderiza el elemento según el valor de verdad de la expresión. Cuando la condición es falsa, no se renderiza el DOM.
Uso básico
Ejemplo
<template>
<div>
<p v-if="isLoggedIn">Bienvenido de nuevo, usuario</p>
<p v-else>Inicia sesión</p>
</div>
</template>
<script>
export default {
data() {
return { isLoggedIn: true }
}
}
</script>
<div>
<p v-if="isLoggedIn">Bienvenido de nuevo, usuario</p>
<p v-else>Inicia sesión</p>
</div>
</template>
<script>
export default {
data() {
return { isLoggedIn: true }
}
}
</script>
Combinación con v-else y v-else-if
v-if puede combinarse con v-else-if y v-else para formar una cadena de condiciones:
Ejemplo
<div v-if="status === 'loading'">Cargando...</div>
<div v-else-if="status === 'error'">Error al cargar</div>
<div v-else>Contenido: {{ data }}</div>
<div v-else-if="status === 'error'">Error al cargar</div>
<div v-else>Contenido: {{ data }}</div>
Otras extensiones