2.6 KiB
title | localeTitle |
---|---|
Control Flow | Flujo de control |
Flujo de control
Condicionales
Con Vue.js puedes decidir si mostrar o no un fragmento de código en tu final Página, dependiendo de alguna condición. Por ejemplo, imagine una entrada de formulario que es requiere un texto de al menos 8 caracteres: si la entrada del usuario es más corta que 8, que debería aparecer un mensaje de error; pero si la entrada es más larga que 8, el el mensaje desaparece
Pero vamos a hacer un ejemplo más simple. Queremos condicionar la exposición de un mensaje a un contador:
<div id="app">
<p v-if="counter > 10">
This message is only rendered when the counter is greater than 10
</p>
</div>
let app = new Vue({
el: '#app',
data: {
counter: 0
}
});
Si vas a la consola y empiezas a incrementar el contador, cuando cruza nuestro Umbral de 10, se mostrará el mensaje! Entonces, si decrementas el counter
, Vue.js ocultará el mensaje cuando el counter
sea inferior a 10. Para eso, nosotros utiliza la directiva v-if
.
Y quizás te preguntes si hay else
para eso if
. Y ahí está el v-else
Tenga en cuenta que el v-else
siempre
- esperar un
v-if
antes de ello - se refiere al
v-if
más cercano en la página
Cambiemos un poco nuestro primer ejemplo para aclarar esto.
<div id="app">
<p v-if="counter > 10">
This message is only rendered when the counter is greater than 10
</p>
<p v-else>
And this is the "otherwise" option
</p>
</div>
let app = new Vue({
el: '#app',
data: {
counter: 0
}
});
Juega un poco con eso cambiando los valores de counter
y pon atención a mensaje mostrado
Vue.js también tiene la directiva v-else-if
.
Bucles
Vue.js también ayuda con la generación de copias múltiples del mismo código. Estructura, con bucles. El ejemplo clásico es una lista renderizada dinámicamente.
<div id="app">
<ul>
<li v-for="item in list">
{{ item }}
</li>
</ul>
</div>
let app = new Vue({
el: '#app',
data: {
list: [
"shave",
"do the dishes",
"clean the sink",
"pay the bill"
]
}
});
Mucho más fácil que insertar una gran cantidad de <li>
. Y note que cada vez que la list
cambios, el resultado cambiará de acuerdo a Pruébalo: abre la consola y push
alguna cadena a la list
con
app.list.push("something else");
Como era de esperar, la página renderizada ahora tiene nuestro nuevo artículo!