b8d6d5bddf
The text has been revised and gramatical errors have been fixed. Also, the section "Accessing current index in loops" from the english original article is now added to the file and translated.
116 lines
3.1 KiB
Markdown
116 lines
3.1 KiB
Markdown
---
|
|
title: Control Flow
|
|
localeTitle: Flujo de control
|
|
---
|
|
## Flujo de control
|
|
|
|
### Condicionales
|
|
|
|
Con Vue.js puedes decidir si mostrar o no un fragmento de código en tu página final, dependiendo de alguna condición. Por ejemplo, imagina una entrada de formulario que requiere un texto de al menos 8 carácteres: si la entrada del usuario tiene menos de 8, debería aparecer un mensaje de error; pero si la entrada es más o igual que 8, el mensaje desaparece.
|
|
|
|
Vamos a hacer un ejemplo más simple. Queremos condicionar la visualización de un mensaje a un contador:
|
|
|
|
```html
|
|
|
|
<div id="app">
|
|
<p v-if="counter > 10">
|
|
This message is only rendered when the counter is greater than 10
|
|
</p>
|
|
</div>
|
|
```
|
|
|
|
```javascript
|
|
let app = new Vue({
|
|
el: '#app',
|
|
data: {
|
|
counter: 0
|
|
}
|
|
});
|
|
```
|
|
|
|
Si vas a la consola y empiezas a incrementar el contador, cuando cruce nuestro límite de 10, ¡se mostrará el mensaje! En cambio, si lo decrementas, Vue.js ocultará el mensaje cuando el contador (`counter`) sea inferior a 10. Para ello, nosotros utilizamos la directiva `v-if` .
|
|
|
|
Y quizás te preguntes si hay un `else` para ese `if` . Y ahí está el `v-else` . Ten en cuenta que el `v-else` siempre
|
|
|
|
* esperará tener un `v-if` previo a él
|
|
* se referirá al `v-if` más cercano en la página
|
|
|
|
Cambiemos un poco nuestro primer ejemplo para aclarar esto.
|
|
|
|
```html
|
|
|
|
<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>
|
|
```
|
|
|
|
```javascript
|
|
let app = new Vue({
|
|
el: '#app',
|
|
data: {
|
|
counter: 0
|
|
}
|
|
});
|
|
```
|
|
|
|
Juega un poco con él cambiando los valores de `counter` y pon atención al mensaje mostrado
|
|
|
|
Vue.js también tiene la directiva `v-else-if` .
|
|
|
|
### Bucles
|
|
|
|
Vue.js también ayuda con la generación de múltiples copias de la misma estructura de código, con bucles. El ejemplo clásico es una lista renderizada dinámicamente.
|
|
|
|
```html
|
|
|
|
<div id="app">
|
|
<ul>
|
|
<li v-for="item in list">
|
|
{{ item }}
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
```
|
|
|
|
```javascript
|
|
let app = new Vue({
|
|
el: '#app',
|
|
data: {
|
|
list: [
|
|
"shave",
|
|
"do the dishes",
|
|
"clean the sink",
|
|
"pay the bill"
|
|
]
|
|
}
|
|
});
|
|
```
|
|
|
|
Es mucho más fácil que insertar una gran cantidad de `<li>` . Y observa que cada vez que la lista (`list`) cambie, el resultado cambiará acordemente. Pruébalo: abre la consola y añade (`push`) alguna cadena a la lista (`list`) con
|
|
|
|
```javascript
|
|
app.list.push("something else");
|
|
```
|
|
|
|
Como es de esperar, ¡la página renderizada ahora tiene nuestro nuevo artículo!
|
|
|
|
### Accediendo al índice actual en bucles
|
|
|
|
`v-for` también admite un segundo argumento opcional para el índice del elemento actual:
|
|
|
|
```html
|
|
<div id="app">
|
|
<ul>
|
|
<li v-for="(item, index) in items">
|
|
{{ index }}: {{ item }}
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
```
|
|
De esta manera, podemos usar `index` para añadir estilos al primer, al último, o a los elementos pares/impares de la lista de manera diferenciada, o aplicar lógica extra a nuestro componente.
|