From b8d6d5bddfafd4ada4a261cd21cdb5eb70b585be Mon Sep 17 00:00:00 2001 From: "F. Anselmo" Date: Mon, 12 Aug 2019 22:47:10 +0200 Subject: [PATCH] Improved translation and new translated section (#27889) 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. --- guide/spanish/vue/control-flow/index.md | 35 ++++++++++++++++++------- 1 file changed, 25 insertions(+), 10 deletions(-) diff --git a/guide/spanish/vue/control-flow/index.md b/guide/spanish/vue/control-flow/index.md index 783bacbb3b..0cb6a9fe32 100644 --- a/guide/spanish/vue/control-flow/index.md +++ b/guide/spanish/vue/control-flow/index.md @@ -6,9 +6,9 @@ localeTitle: 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 +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. -Pero vamos a hacer un ejemplo más simple. Queremos condicionar la exposición de un mensaje a un contador: +Vamos a hacer un ejemplo más simple. Queremos condicionar la visualización de un mensaje a un contador: ```html @@ -28,12 +28,12 @@ let app = new Vue({ }); ``` -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` . +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 `else` para eso `if` . Y ahí está el `v-else` Tenga en cuenta que el `v-else` siempre +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 un `v-if` antes de ello -* se refiere al `v-if` más cercano en la página +* 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. @@ -58,13 +58,13 @@ let app = new Vue({ }); ``` -Juega un poco con eso cambiando los valores de `counter` y pon atención a mensaje mostrado +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 copias múltiples del mismo código. Estructura, con bucles. El ejemplo clásico es una lista renderizada dinámicamente. +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 @@ -91,10 +91,25 @@ let app = new Vue({ }); ``` -Mucho más fácil que insertar una gran cantidad de `
  • ` . 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 +Es mucho más fácil que insertar una gran cantidad de `
  • ` . 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 era de esperar, la página renderizada ahora tiene nuestro nuevo artículo! \ No newline at end of file +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 +
    +
      +
    • + {{ index }}: {{ item }} +
    • +
    +
    +``` +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.