Seguimos aprendiendo VueJS, y ahora le toca el turno a las condicionales con VueJS. Se trata de utilizar los if … then, o if … else if … else …
El ejercicio que vamos a realizar es bastante sencillo, y dentro del código HTML se utiliza la directiva v-if, v-else-if o v-else.
El objetivo
El objetivo del ejercicio de hoy es disponer de 2 botones, uno para “Me gusta” y otro para “No me gusta“, que están controlados por una variable like y notlike. Si pulso un botón, cambiaré el valor de la propiedad asignada. Si es True pasa a False, y si es False pasará a True. Dependiente de su estado, se mostrará un mensaje u otro.
En la segunda parte del código HTML, se muestra casi lo mismo, pero utilizando v-show.
<!DOCTYPE html>
<html>
<title>ManejandoDatos.es - VueJS Eventos</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="estilo.css" rel="stylesheet" />
<body>
<div id="main">
<button v-on:click="like = !like">Me gusta - Like</button>
<button @click="notlike = !notlike">No me gusta - Don't Like</button>
<h3 v-if="like">Me gusta!! :-)</h3>
<h3 v-else-if="notlike">No me gusta :-(</h3>
<h3 v-else>Upssss</h3>
<hr>
<h3 v-show="like">Me gusta!! :-)</h3>
<h3 v-show="notlike">No me gusta :-(</h3>
<h3 v-show="!notlike && !like">Upssss</h3>
</div>
</body>
</html>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.13/dist/vue.js"></script>
<script>
let app2 = new Vue({
el: '#main',
data: {
like: false,
notlike: false
}
})
</script>
Si pulso en Like, mostrará un mensaje, y si pulso en No me gusta, se mostrará otro. Si ambas variables son falsas, en la zona de arriba se mostrará un mensaje distinto.
En la zona de abajo, se mostrarán los mensajes correspondientes según el valor de las variables.
VueJS condicionales
v-show solo cambia el estilo
Hacen casi lo mismo, pero ¿donde está la diferencia? La diferencia es que v-show siempre se mantiene en el DOM, aunque será visible o no dependiendo del estilo. En la imagen anterior puedes comprobarlo.
Por tanto, dependiendo de si te interesa que en el DOM esté preparado cierto código oculto o no, te interesa utilizar esta directiva.
Realmente, es sencillo de utilizar las condiciones! Seguimos!