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 de condicionar la carga en el DOM o incluso la visualización de componentes html. En esta ocasión nos vamos a enfocar en el uso y la funcionalidad de la directiva v-show.

Inicia sesión para poder registrar las lecciones que has completado Login

La palabra directiva generalmente tiende a confundir, es por esto que vamos a explicar de una forma muy sencilla su significado.

DIRECTIVA: Es aquello que utilizamos para que las etiquetas (div, body, p, ul) o elementos hagan algo.

Ahora, hay que tener claro la funcionalidad de las directivas a emplear en este video.

V-SHOW: Es utilizada para mostrar u ocultar elementos mediante el cumplimiento de una condición. Esta funcionalidad es muy parecida a la de la directiva V-IF que veremos posteriormente.

V-MODEL: Es una directiva que sirve para enlazar un elemento html con una variable vue que varía en función del valor del elemento de entrada o salida de los componentes.  

Ejemplo

Para mostrar la funcionalidad de la directiva v-show vamos a utilizar un documento html con dos elementos, en este caso serán un <input type=”text”> y un <input type=” submit”>.

<div class="col-md-5">
    <input type="text" v-model="email" class="form-control">
</div>
<div class="col-md-1">
    <input type="submit" v-show="email" class="btn btn-primary">
</div>

Como podemos observar la caja de texto tiene la directiva v-model que por medio de la variable email se conectará al código vue más adelante.

Así también tenemos el botón con la directiva v-show que se encarga de controlar condicionalmente por medio de la variable modelo “email” si la caja tiene texto. Si tiene algún texto el botón se muestra, sino tiene se oculta.  

Código vue

Como ya sabemos para utilizar Vue primeramente necesitamos de su CDN. Luego creamos una instancia u objeto Vue en el que indicamos el id del div en el que va a trabajar nuestro código vue.

En el html hemos creado por medio de v-model un modelo de la caja texto con la variable email, esta variable debemos definirla como vacía para que cuando se escriba un texto en la caja ésta variable tóme ese valor y la directiva v-show haga que se muestre el botón.

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

Con este ejemplo práctico y muy sencillo podrás darte cuenta cómo podemos darle dinamismo a una página web, ahora seguramente se te están viniendo miles de ideas a la cabeza de como podrías utilizar esta funcionalidad y mejorar futuros proyectos a desarrollar, esa es la idea.

Adquiere en preventa y aprovecha un gran descuento TDD en Laravel

Comparte en

Creado por: Venezuela Italo Morales

Profesor de #Laravel y #PHP en Rimorsoft Online

Más información


Error en modificacion de datos

Hola, Estoy teniendo un error con laravel (5.7) y no le puedo encontrar la vuelta.

Mi problema:

Tengo una lista de usuarios la cual tiene 3 botones (ver, activar y eliminar) mi problema viene con el boton activar el cual activa o desactiva un usuario segun su estado ( si esta activado lo desactiva y si esta desactivado lo activa), pero cuando presiono el boton me tira ...

Como crear un array y almacenarlo en una Base de Datos

Necesito ayuda con un problema, estoy haciendo un tipo de sistema de facturación y los servicios que se van a facturar los quiero guardar en un array, luego éste array almacenarlo en una sola columna de la base de datos. No tengo mucho conocimientos de Arrays. Pero ya había trabajado en una tienda virtual y la parte del carrito la hacía así, con un array.

El punto es qu...

owen-it / laravel-auditing

saludos a la comunidad necesitaría de su ayuda con esta librería   ooowen-it / laravel-auditing para un proyecto en laravel de echo encontré material pero no me es fácil entenderlo (auditoria de usuarios este es link https://pusher.com/tutorials/realtime-audit-trail-laravel me ayudaría mucho un videotutorial gracias!...

No puedo instalar el paquete de shinobi

soy nuevo en esto , estoy viendo su curso de roles y permisos en su canal de youtube, necesito instalar el paquete de shinobi pero no se puede, me sale lo siguiente:

Problem 1 - Installation request for caffeinated/shinobi ^3.3 -> satisfiable by caffeinated/shinobi[v3.3]. - Conclusion: remove laravel/framework v5.8.4 - Conclusion: don't install laravel/fr...