Cursos Empresas Blog Live Conf Precios

Manejo de condiciones con Vue.js

Clase 4 de 17 • Curso Básico de Vue.js 2016

Clase anteriorSiguiente clase

Resumen

Para tener en cuenta:

Los Template no son elementos HTML, por lo tanto no son archivos que el navegador pueda interpretar.
No se puede poner un atributo de CSS a un elemento que el navegador no entiende.
Template es un englobador de objetos que** Vue.js** puede interpretar.

David Camacho

student•

Las clases con este man son lo máximo! ❤️

Víctor Hugo Villalobos Balzán

student•

Excelentes clases sasha, eres de los mejores instructores de Platzi.

Diego Hernán Moreno Amaya

student•

Mis apuntes:

Mostrar u ocultar elementos - Mediante vi-if:
// Para un render inicial es recomendable vi-if

Se engloba los elementos en <template v-if=“mostrar”>
Dentro del script utilizar el elemento mostrar como un true

Vue.js utiliza en vez de div un template que es un contenedor invisible o dinámico, que en el navegador desaparece o se destruye. Se usa para agregarle atributos de vue pero que sea “invisible” ante el navegador

Otra manera - Mediante v-show
// No se puede usar en los <template>, sólo en div o elementos que el navegador entienda
// Se usa si se va a ocultar o mostrar mucho, si tiene que ver con interacción de usuario es preferible usar éste

dentro de un <div v-show=“mostrar”>
o en otro <div v-show="!mostrar">

KEVIN BRAYAN LUNA FIGUEROA

student•

Gracias por el aporte!!

Emiliano Jaimes

student•

Muchas gracias por compartirnos tus apuntes ^^

Rogelio García Valenzuela

student•

v-show No se usa en template porque no se puede poner un atributo de css a un navegador que no entiende.

Roger Davila

student•

El elemento template no se muestra en el DOM. Sirve como una especie de envoltorio para englobar varios elementos.

v-if: borra o crea los elementos en el DOM
- Es mas pesado para cargar
- Se recomienda para render inicial
v-show: Solo oculta o muestra los elementos con css, por lo tanto no se puede utilizar con templates
- Se recomienda para mostrar u ocultar de acuerdo a la interacción del usuario

Eduardo David

student•

Que bien explica Sacha

Jesús Miguel Quinto Teran

student•

Super interesante lo del <template>, siempre había envuelto los elementos a ocultar en un <div>

Elías Parada Pedroso

student•

Vue me está pareciendo genial, y el profe también

Alan Lapierre

student•

Los elementos TEMPLATE solamente se pueden usar V-IF. En los demás elementos se puede colocar V-IF o V-SHOW, según queramos que este elemento aparezca o no formando parte del DOM.

Alan Lapierre

student•

Si vamos a hacer que un elemento se muestre y se oculte muchas veces, es mas efectivo usar V-SHOW, ya que solamente cambia un atributo de CSS y esto es mas eficiente que un V-IF en esos casos.

Christian David Sánchez

student•

Que interesante la forma como VUE juega con el DOM, de la manera mas sencilla posible.

Bryan Mendoza

student•

Hay algo que no logro entender y es que en el minuto 5:36, Sacha nos dice que la etiqueta

<template>

Es un elemento de HTML, pero en el minuto 10:04 él dice que esta etiqueta no es un elemento valido

¿A qué hace referencia esto?

Erik Elyager

student•

Para dejarlo claro, <template>no es una etiqueta valida en el estándar HTML que el navegador pueda entender. Vue.js es quién entiende esta etiqueta y la manipula a través de Javascript. ¿Cuál es su uso? bueno es comúnmente usada para evitar el uso de divs cuando sólo queremos agrupar elementos. Así le evitamos al navegador hacer renders de etiquetas <div>.

Williams Jhair Parra Arenas

student•

Usar v-show cuando se requiera que un elemento se muestre múltiples veces
Usar v-if para que no se muestren elementos luego de cargar la página

Nicole Vásconez

student•

Lo que decía de comprimir imágenes, lo que al final terminamos viendo cómo "pixelado". Los artefactos son los rectángulos de comprensión (aquello que es igual en un espacio determinado de una imagen)

Bryan José Muñiz Gonzalez

student•

v-if para condicionales en elementos

jose

student•

platzy como limitar el foro a temas exclusivos con el tema en cuestión y no estar alabando al instructor, gracias.

Edwin Anciani

student•

Felicitar por un gran trabajo no mata a nadie. Cuando lo hagan contigo sabras lo que se siente.

Gabriel Alejandro Nuñez Natera

student•

Es parte del curso, está bien hacer saber al instructor que lo está haciendo bien, eso es un aporte importante para él. De igual forma está bien corregir al instructor o dar críticas constructivas. Limitar el sistema de aportes sería algo despota, deja que los estudiantes se expresen. 😃

Marco Antonio Martinez

student•

Genial…!

Maycol Uribe Romero

student•

En lugar de usar un div para mostrar o ocultar un grupo de elementos con v-if, podemos usar la equita htmk <template></template> y lo que sucese es que si lo comprobacion es falsa, no muestra nada ahorrandonos un div

Juan C Felizzola

student•

v-show agrega el atributo display: none cuando no se desea mostrar algo
v-if borra del DOM lo que no es válido

v-show es ideal cuando vamos a tener un elemento que deseemos mostrar y ocultar varias veces según una acción del usuario

Yomar Esteban Miranda Sarmiento

student•

La diferencia entre ‘v-if’ y ‘v-show’ es que ‘v-if’ cuando está en FALSE elimina el elemento de DOM, en cambio ‘v-show’ para ocultarlo le agrega el atributo ‘style’ y le asigna la propiedad ‘display:none’, al final elemento que de la siguiente manera:
<div style="display:none;"></div>

Bryan Estiven Silva Mercado

student•

excelente clase