Traducción y revisión parcial (guide) (#73)

Author: siddharta1337

Diff for: src/v2/guide/class-and-style.md

@@ -4,21 +4,21 @@ type: guide
 order: 6
 ---
 
-Una necesidad común para la vinculación de datos es manipular la lista de clases de un elemento, así como sus estilos en línea. Como ambos son atributos, podemos usar `v-bind` para controlarlos: sólo debemos calcular un string final con nuestras expresiones. Sin embargo, trabajar con concatenaciones de strings es molesto y propenso a errores. Por esta razón, Vue ofrece mejoras especiales cuando `v-bind` es usado junto con `class` and `style`. En adición a strings, las expresiones pueden también ser evaluadas a objetos o arrays.
+Una necesidad común para la vinculación de datos es manipular la lista de clases de un elemento y sus estilos en línea. Como ambos son atributos, podemos usar `v-bind` para manejarlos: sólo necesitamos calcular una cadena de texto final con nuestras expresiones. Sin embargo, trabajar con concatenaciones de cadenas de texto es molesto y propenso a errores. Por esta razón, Vue proporciona mejoras especiales cuando se utiliza `v-bind` con `class` y `style`. Además de las cadenas de texto, las expresiones también pueden evaluar objetos o arrays.
 
 ## Vinculación de datos en clases HTML 
 
 ### Sintaxis de objeto
 
-Podemos pasar un objeto a `v-bind:class` para intercambiar dinámicamente las clases:
+Podemos pasar un objeto a `v-bind:class` para cambiar dinámicamente de clase:
 
 ``` html
 <div v-bind:class="{ active: isActive }"></div>
 ```
 
-La sintaxis anterior ilustra que la presencia de la clase `active` será determinada por el [thrutiness](https://developer.mozilla.org/en-US/docs/Glossary/Truthy) de la propiedad `isActive`.
+La sintaxis anterior significa que la presencia de la clase `active` estará determinada por el [thrutiness](https://developer.mozilla.org/en-US/docs/Glossary/Truthy) de la propiedad `isActive`.
 
-Puede intercambiar múltiples clases si tiene más campos en el objeto. Además, la directiva `v-bind:class` puede coexistir con el atributo común `class`. De modo que en la siguiente plantilla:
+Puede alternar múltiples clases al tener más campos en el objeto. Además, la directiva `v-bind:class` también puede coexistir con el atributo `class` regular. Así que, dada la siguiente plantilla:
 
 ``` html
 <div class="static"
@@ -35,15 +35,15 @@ data: {
 }
 ```
 
-Se va a renderizar:
+Se renderizará:
 
 ``` html
 <div class="static active"></div>
 ```
 
-Siempre que `isActive` o `hasError` cambie, la lista de clases será actualizada acordemente. Por ejemplo, si `hasError` toma el valor `true`, la lista de clases cambiará a `"static active text-danger".`
+Cuando `isActive` o `hasError` cambien, la lista de clases se actualizará en consecuencia. Por ejemplo, si `hasError` se convierte en `true`, la lista de clases se convertirá en `"static active text-danger"`.
 
-El objeto vinculado no debe necesariamente estar en línea:
+El objeto vinculado no tiene que estar en línea:
 
 ``` html
 <div v-bind:class="classObject"></div>
@@ -57,7 +57,7 @@ data: {
 }
 ```
 
-Esto mostrará el mismo resultado. También podemos vincular a una [propiedad calculada](computed.html) que retorne un objeto. Esto es un patrón muy común y poderoso:
+Esto dará el mismo resultado. También podemos vincular a una [propiedad calculada](computed.html) que devuelve un objeto. Este es un patrón común y poderoso:
 
 ``` html
 <div v-bind:class="classObject"></div>
@@ -97,25 +97,25 @@ Lo cual renderizará:
 <div class="active text-danger"></div>
 ```
 
-Si quisiera también intercambiar condicionalmente una clase en el listado de clases, lo puede hacer con una expresión ternaria:
+Si también desea alternar condicionalmente una clase de la lista, puede hacerlo con una expresión ternaria:
 
 ``` html
 <div v-bind:class="[isActive ? activeClass : '', errorClass]"></div>
 ```
 
-Esto siempre aplicará `errorClass`, pero solo aplicará `activeClass` cuando `isActive` tenga valor `true`.
+Esto siempre aplicará `errorClass`, pero sólo se aplicará `activeClass` cuando `isActive` sea verdadero.
 
-Sin embargo, esto puede ser un poco extenso si tiene múltiples clases condicionales. Por esto también es posible usar la sintaxis de objeto dentro de la sintaxis de array:
+Sin embargo, esto puede ser un poco extenso si tiene varias clases condicionales. Es por eso que también es posible usar la sintaxis de objeto dentro de la sintaxis de array:
 
 ``` html
 <div v-bind:class="[{ active: isActive }, errorClass]"></div>
 ```
 
 ### Con Componentes
 
-> Esta sección asume conocimientos previos de [Componentes Vue](components.html). Sea libre de saltar ésta sección y regresar más adelante.
+> Esta sección asume conocimientos previos de [Componentes Vue](components.html). Siéntase libre de omitirla y regresar más tarde.
 
-Cuando usa el atributo `class` en un componente personalizado, los cambios serán añadidos al elemento raíz del componente. Las clases existentes de dicho elemento no serán sobreescritas.
+Cuando utilice el atributo `class` en un componente personalizado, esas clases se añadirán al elemento raíz del componente. Las clases existentes en este elemento no serán sobrescritas.
 
 Por ejemplo, si declara este componente:
 
@@ -137,7 +137,7 @@ El HTML renderizado será:
 <p class="foo bar baz boo">Hi</p>
 ```
 
-Lo mismo aplica en el uso de vinculación de datos en clases:
+Lo mismo ocurre en el uso de vinculación de datos en clases:
 
 ``` html
 <my-component v-bind:class="{ active: isActive }"></my-component>
@@ -153,7 +153,7 @@ Cuando `isActive` es `true`, el HTML renderizado será:
 
 ### Sintaxis de objeto
 
-La sintaxis de objetos para `v-bind:style` es bastante sencilla - casi parece CSS, excepto que es un objeto javascript. Puede usar camelCase o kebab-case (use comillas con kebab-case) para los nombres de propiedades:
+La sintaxis del objeto para `v-bind:style` es bastante sencilla - casi parece CSS, excepto que es un objeto JavaScript. Puede usar camelCase o kebab-case (use comillas con kebab-case) para los nombres de las propiedades CSS:
 
 ``` html
 <div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
@@ -165,7 +165,7 @@ data: {
 }
 ```
 
-A menudo es una buena idea vincular a un objeto de estilos directamente para que la plantilla sea más limpia:
+A menudo es una buena idea vincular a un objeto de estilos directamente para que la plantilla esté más limpia:
 
 ``` html
 <div v-bind:style="styleObject"></div>
@@ -179,7 +179,7 @@ data: {
 }
 ```
 
-De nuevo, la sintaxis de objeto es comúnmente usada junto con propiedades calculadas que retornan objetos.
+Una vez más, la sintaxis de objeto se utiliza a menudo junto con las propiedades calculadas que devuelven los objetos.
 
 ### Sintaxis de Array
 
@@ -191,7 +191,7 @@ La sintaxis de array para `v-bind:style` le permite aplicar múltiples objetos d
 
 ### Prefijos automáticos
 
-Cuando use una propiedad CSS que requiera [prefijos de navegador](https://developer.mozilla.org/en-US/docs/Glossary/Vendor_Prefix) en `v-bind:style`, por ejemplo `transform`, Vue automáticamente detectará y añadira los prefijos apropiados a los estilos aplicados.
+Cuando use una propiedad CSS que requiera [prefijos de navegador](https://developer.mozilla.org/en-US/docs/Glossary/Vendor_Prefix) en `v-bind:style`, por ejemplo `transform`, Vue detectará y añadirá automáticamente los prefijos apropiados a los estilos aplicados.
 
 ### Múltiples valores
 
@@ -203,4 +203,4 @@ A partir de 2.3.0+ puede asignar un array con múltiples valores (prefijados) a
 <div v-bind:style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"></div>
 ```
 
-Esto sólo renderizará el último valor en el array que sea soportado por el navegador. En este ejemplo, será traducido `display: flex` para navegadores que soporten la versión no prefijada de flexbox.
+Esto sólo renderizará el último valor en el array que sea soportado por el navegador. En este ejemplo, mostrará `display: flex` para los navegadores que soportan la versión sin prefijos de flexbox.