Directiva v-show en Vue.js

Por Darío Rivera

Publicado el 2020-09-25 en Vue.js

Anteriormente en Vue vimos el Renderizado Condicional con v-if, v-else y v-else-if. Existe una parte de renderizado condicional que se puede realizar con la directiva v-show. El día de hoy veremos cómo utilizar esta directiva.

Directiva v-show

Esta directiva es utilizada para mostrar de manera condicional un elemento HTML. Su uso es muy similar a la directiva v-if puesto que acepta una expresión y toma su valor booleano para determinar si se muestra o no dicho elemento.

v-show="expression"

La diferencia con la directiva v-if consiste en que v-show imprime el html y lo coloca como display:none. Sin embargo, la directiva v-if no imprime el elemento en el html.

<div id="app">
 <label for="product">Product X</label><br />
 <input type="number" v-model.number="items">
 <br />
 <p v-show="hasItems()">
   You order has {{ '\{\{ items \}\}' }} items
 </p>
</div>

var app = new Vue({
 el: "#app",
 data: {
   items: 0
 },
 methods: {
   hasItems: function() {
     return this.items > 0;
   }
 }
});

En el siguiente ejemplo de CodePen puedes incrementar el valor de product para obtener el resultado deseado.

Directiva v-show

Categorías