Dijimos anteriormente que Vue utiliza el concepto de directivas para una comunicación entre la vista (HTML) y el modelo (programa en Javascript)
La primer directiva condicional que veremos se llama v-if y me permite definir una condición que dependiendo de su resultado luego la etiqueta HTML o conjunto de etiquetas se muestran o no.
Ingresar una edad en un control de tipo input (number) y mostrar un mensaje si se ingresa un valor mayor o igual a 18.
<!doctype html>
<html>
<head>
<title>Prueba Vue</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
</head>
<body>
<div id="aplicacion">
<p>Ingrese una edad:
<input type="number" v-model="edad"></p>
<p v-if="edad>=18">Es mayor de edad.</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
var app=new Vue({
el: '#aplicacion',
data:{
edad : 0
}
})
</script>
</body>
</html>
Ingrese una edad:
Es mayor de edad.
Hemos dispuesta la directiva v-if para un párrafo:
<p v-if="edad>=18">Es mayor de edad.</p>
Si la condición se verifica verdadera luego el párrafo aparece en caso contrario el párrafo no formará parte del HTML de la página.
Tengamos en cuenta que el bloque que se muestra o no puede ser un div con muchas etiquetas HTML:
<div v-if="edad>=18">
<p>un párrafo</p>
<p>otro párrafo</p>
</div>
Ingresar un valor entre 1 y 100. Mostrar en castellano la cantidad de dígitos que tiene.
<!doctype html>
<html>
<head>
<title>Prueba Vue</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
</head>
<body>
<div id="aplicacion">
<p>Ingrese un valor entre 1 y 100:
<input type="number" v-model="numero" min="1" max="100"></p>
<p v-if="numero<=9">Tiene un dígito</p>
<p v-else-if="numero<=99">Tiene dos dígitos</p>
<p v-else>Tiene tres dígitos</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
var app=new Vue({
el: '#aplicacion',
data:{
numero : 1
}
})
</script>
</body>
</html>
Ingrese un valor entre 1 y 100:
Tiene un dígito
Tiene dos dígitos
Tiene tres dígitos
Utilizamos las tres directivas v-if, v-else-if y v-else:
<p v-if="numero<=9">Tiene un dígito</p>
<p v-else-if="numero<=99">Tiene dos dígitos</p>
<p v-else>Tiene tres dígitos</p>
Si queremos condicionar que un bloque de etiquetas se incorporen en la página o no podemos también utilizar la etiqueta propuesta por vue llamada "template" que el mismo framework no lo incorpora posteriormente en la página:
<template v-if="numero==50">
<h1>Número 50</h1>
<p>Estamos en la mitad.</p>
</template>
Similar a la directiva v-if hace que la etiqueta HTML se muestre o no según el valor de la condición. La diferencia es que la directiva v-show solo hace cambiar la propiedad CSS display por el valor none, es decir sigue existiendo en el DOM de la página la etiqueta pero no está visible.
<div v-show="numero==50">
<h1>Número 50</h1>
<p>Estamos en la mitad.</p>
</div>