Representación/visualización condicional en Vue con v-if, v-show, v-else y v-else-if

En esta guía, aprenda cómo mostrar o renderizar condicionalmente un elemento DOM con JavaScript y Vue.js, usando v-if, v-show, v-else y v-else-if.

Introducción

Vue.js es un marco de aplicación web simple para crear interfaces web dinámicas y aplicaciones de una sola página (SPA). A medida que creamos estas aplicaciones, a menudo queremos renderizar algo en función de un criterio particular: esta es la esencia del renderizado condicional.

La representación condicional se refiere a la capacidad de representar marcas distintas de la interfaz de usuario (UI) en función de si una condición es verdadera o no. Esta noción se usa con frecuencia en contextos como mostrar u ocultar componentes (alternar), cambiar la funcionalidad de la aplicación, manejar la autenticación y la autorización, y muchos más.

En este artículo, veremos varias formas de representación condicional en Vue.js usando las directivas v-if, v-else-if y v-else. También veremos algunos ejemplos y destacaremos la diferencia entre v-if y v-show.

v-si

La directiva v-if se utiliza para representar condicionalmente un bloque, lo que significa que el bloque con el atributo v-if solo se producirá si la expresión de la directiva devuelve un valor verdadero. Si la expresión produce un resultado no válido (por ejemplo, null, 0, cadena vacía, false), el elemento se borra del DOM.

Ilustremos este comportamiento en el ejemplo práctico:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
<div v-if="login">
    <p>This user has been logged in!... Welcome.</p>
</div>

<script>
export default {
    data() {
        return {
            login: true,
        };
    }
};
</script>

Dado que login se establece en true, se generará el bloque <div> que contiene la directiva v-if y, por lo tanto, se mostrará.

v-if frente a v-show

Vale la pena señalar que v-show también funcionaría en el ejemplo anterior y funcionaría aparentemente de manera idéntica, pero hay una distinción entre los dos.

v-if representa condicionalmente un elemento, mientras que v-show muestra/muestra condicionalmente un elemento.

Esto implica que cuando se alterna el condicional, v-if en realidad eliminará y restaurará los componentes, mientras que v-show solo los hace invisibles o visibles. La siguiente animación ilustra cómo v-if realmente elimina y reproduce bloques de código:

Mientras tanto, v-show siempre mantendrá el elemento en el DOM y solo cambiará su CSS para alternar su apariencia (configurando su display a none):

v-si no

La directiva v-else es una directiva v-if que le permite personalizar el valor falso en representaciones condicionales. Si no es verdadero, puede usar v-else para definir lo que debería suceder en su lugar.

Por ejemplo, supongamos que tenemos una entrada de contraseña y queremos que produzca un mensaje de error, "Contraseña débil", si la longitud de la entrada es inferior a 6 o mostrar "Contraseña fuerte" si la longitud es mayor que 6.

Este es un renderizado condicional, con una opción para manejar el caso falso:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
<form>
    <input type="password" v-model="password" placeholder="Enter your password" />
    <p v-if="password.length > 6">Strong Password</p>
    <p v-else>Weak Password</p>
</form>

<script>
export default {
    data() {
        return {
            password: ""
        };
    }
};
</script>

{.icon aria-hidden=“true”}

Nota: v-if/v-else funciona como la expresión regular if y if...else en JavaScript.

Utilicemos esto para alternar el contenido de una página de inicio de sesión simple para que cambie el mensaje en función de si un usuario ha iniciado sesión o no. También modificaremos la redacción del botón según el estado userLoggedIn:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<div id="app">
    <div v-if="userLoggedIn">
        <h2>Hello Welcome!</h2>
        <p>You have sucessfully logged in to your user account!</p>
    </div>
    <div v-else>
        <p>Please Log In to access your account!</p>
    </div>
    <button @click="userLoggedIn = !userLoggedIn">
        <p v-if="!userLoggedIn">Login</p>
        <p v-else>LogOut</p>
    </button>
</div>
    
<script>
export default {
    data() {
        return {
            userLoggedIn: false
        };
    }
};
</script>

El evento de clic del botón alternará el elemento de datos userLoggedIn, y esto afectará los datos que se muestran a continuación:

v-else-if

v-else-if extiende un v-if con un bloque else...if. Esto es similar al bloque else...if de JavaScript en el sentido de que nos permite agregar una declaración if a un v-if existente. Esto se usa cuando hay muchos criterios para verificar y se puede encadenar varias veces:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
<form>
    <input type="password" v-model="password" placeholder="Enter your password" />
    <p v-if="password.length < 4">Weak Password</p>
    <p v-else-if="password.length < 7">Fairly Strong Password</p>
    <p v-else>Strong Password</p>
</form>

<script>
export default {
    data() {
        return {
            password: ""
        };
    }
};
</script>

{.icon aria-hidden=“true”}

Nota: Cuando tanto v-if como v-for se usan para el mismo elemento, v-if se evalúa primero. Esto simplemente implica que no se recomienda usar v-if y v-for en el mismo elemento, debido a la precedencia implícita.

Conclusión

En este artículo, hemos visto cómo renderizar condicionalmente un elemento con v-if, v-else y v-else-if. También explicamos la diferencia entre v-if y v-show.