V-IF V-ELSE y TEMPLATE

↑ Me gusta (1)

En esta oportunidad vamos hablar de las directivas entre v-if, v-else y de cómo utilizar el elemento template en VUE por medio de un ejercicio que nos explique las ventajas y beneficios de utilizar cada una de estas directivas. Al final haremos una comparación de v-if con v-show ya que su funcionamiento es parecido. Por medio de un ejercicio práctico vamos a mostrar poco a poco el funcionamiento de las directivas v-if y v-else. A su vez vamos a indicar como se usa el elemento template en nuestra vista o html.

Código Vue

Para este ejercicio vamos a necesitar el mismo código que hemos utilizado en ejercicios anteriores con una única diferencia que será cambiar el nombre de la variable por “message”.

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.0/vue.js"></script>
<script type="text/javascript">
    new Vue({
        el: '#main',
        data: {
	    message: ' '
	}
    });
</script>

 

V-IF

Es una directiva de vue que nos permite mostrar o hacer algo según se cumpla una condición.

Ejemplo

  • Vamos a utilizar la directiva v-model para crear un enlace por medio de la variable message de un textarea con nuestro código vue.
  • Agregamos la directiva v-if en la primera etiqueta <h3> con la condición de que si la variable está vacía aparecerá el texto “Escribe tu sugerencia”.
  • Luego en la segunda etiqueta <h3> la directiva v-if tendrá la condición de que si la variable tiene un mensaje aparecerá el texto “Presiona ENTER para enviar”.
<h3 v-if="!message">Escribe tu sugerencia</h3>
<h3 v-if="message">Presiona ENTER para enviar</h3>
<textarea v-model="message" class="form-control"></textarea>

 

V-ELSE

Esta directiva trabaja en función a que si la condición declarada en la directiva v-if no se cumple, esta realizará o mostrará algo diferente.

Ejemplo

En el ejemplo anterior utilizamos dos veces la directiva v-if, ahora con la directiva v-else obtendremos el mismo resultado, pero de esta manera el código y la lógica es más clara y fácil de entender. El v-else se ata a la condición asignada en el v-if; si la variable “message” está vacía muestra el primer <h3>, caso contrario se muestra el segundo.

<h3 v-if="!message">Escribe tu sugerencia</h3>
<h3 v-else>Presiona ENTER para enviar</h3>
<textarea v-model="message" class="form-control"></textarea>

 

TEMPLATE

Este elemento no se renderiza en nuestro html (es algo así como invisible), su funcionalidad se basa en crear grupos condicionales para el uso de las directivas como v-if. Es decir, si por ejemplo tenemos varias etiquetas que se tienen que mostrar a partir de una condición usamos template para agruparlos y usar en este elemento la condición v-if una sola vez y ya no en cada elemento.

Ejemplo

Utilizando el elemento <template> agrupamos 3 etiquetas html que se mostrarán cuando la condición de la variable “message” esté vacía se cumpla, caso contrario mostrará el mensaje “Presiona ENTER para enviar”.

<template v-if="!message">
    <h3>Escribe tu sugerencia</h3>
    <p>El equipo de soporte responde en máximo 24 horas</p>
    <p><em>Podrías utilizar Twitter para comunicarte</em></p>
</template>

<h3 v-else>Presiona ENTER para enviar</h3>
<textarea v-model="message" class="form-control"></textarea>

¿Cuándo utilizar V-IF y cuando V-SHOW?

Como primera diferencia podemos decir que si la condición es única y no necesitamos de un else, tendríamos que utilizar la directiva v-show. Pero si necesitamos una doble condición y no estar repitiendo v-show en ambos elementos, utilizaríamos la directiva v-if.

Una segunda diferencia se basa en su nivel de rendimiento ya que v-show representa un mayor tiempo de carga porque hace su proceso de renderizado apenas carga la página web. En cambio v-if, si inicialmente la condición es falsa simplemente no se va a tomar en cuenta o no se van a renderizar los elementos que se encuentren dentro de la condición, solo lo hará cuando la condición sea verdadera.

Así terminamos recuerda comentar :)

  • Ernesto Canquiz

Italo Morales F. Italo Morales F. 3,230.00 XP

1

Bienvenidos al curso de VUE 2

En este video damos la bienvenida a este gran curso, este es un tema muy solicitado y sinceramente queremos hacerlo mejor que cualquiera, de...

2

Renderización de listas VUEjs

En este video enseño a trabajar las listas en #VUE. Listamos elementos, agregamos de forma dinámica, y damos las bases necesarias para abord...

3

Vinculación de datos con Vue.js - Data Binding con V-BIND

Comencemos con una revisión de VUE, aprende en este video sobre la vinculación de datos, y esto es lo más maravilloso, es automático, es...

4

VUEjs y AJAX, manejo de respuesta JSON con VUE-RESOURCE

Vue Resource: El complemento para Vue.js que proporciona servicios para realizar peticiones web y manejar respuestas usando un XMLHttpRe...

5

Vue-resources y Axios para VUEjs

En VUE.js podemos trabajar sin problemas con AJAX, hablamos de vue-resource y de axios como te enseño en este video. Si comenzaste a...

6

Ajax con axios en VUEjs

Ha llegado la hora de trabajar con la librería más recomendada por el equipo de VUE para el manejo de peticiones AJAX. Se trata de AXIOS...

7

Introducción LARAVEL y VUE - uso de AJAX

En este video vamos hacer una pequeña introducción de la conexión de VUEjs y Laravel con el principal objetivo de mostrarte mediante...

8

Directivas, V-SHOW

En este video vamos mostrarte un poco sobre las directivas de renderizado condicional de VUE, es decir aquellas directivas que son capaces d...

9

V-IF V-ELSE y TEMPLATE

En esta oportunidad vamos hablar de las directivas entre v-if, v-else y de cómo utilizar el elemento template en VUE por medio d...

10

Eventos en VUE

En este video vamos a trabajar específicamente en los eventos de VUE, los cuales podrían ser básicamente un clic, presionar una tecla, cualq...

11

Filtros en VUE.js usando Computed Properties

En este video vamos a utilizar varias directivas explicadas en videos anteriores como v-model, v-if y v-on, además de los métodos y las prop...

12

Componentes en VUEjs

Vamos aprender a cómo crear componentes en VUE. Con componentes nos referimos a esos bloques de html que son estándar y que se usan varias v...

13

Así despedimos el curso #VUEjs

El objetivo de este video es para despedirnos de esta serie, indicando en un breve resumen todo lo que hemos aprendido a lo largo del curso,...

Libro de Laravel Engineer Compra el libro Laravel Engineer