diff --git a/guide/english/vue/control-flow/index.md b/guide/english/vue/control-flow/index.md
index f61f10164c..e4861371ac 100644
--- a/guide/english/vue/control-flow/index.md
+++ b/guide/english/vue/control-flow/index.md
@@ -7,18 +7,14 @@ title: Control Flow
### Conditionals
-With Vue.js you can decide wheter to show or not a piece of code in you final
-page, depending on some condition. For example, imagine a form input that is
-required a text at least 8 characters long: if the user input is shorter than 8,
-than an error message should appear; but if the input is longer than 8, the
-message disappears.
+With Vue.js you can decide whether to show or not a piece of code in your final page, depending on some condition. For example, imagine a form input that requires a text input at least 8 characters long: if the user input is shorter than 8, an error message should appear; but if the input is longer than 8, the message disappears.
-But let's make a simpler example. We want a condition that determines what is displayed, using a counter:
+Let's make a simpler example. We want to condition the exibition of a message to a counter:
```html
- This message is only rendered when the counter is greater than 10
+ The counter is greater than 10!
```
@@ -32,26 +28,24 @@ let app = new Vue({
});
```
-If you go to the console and start to increment the counter, when it crosses our
-threshold of 10, the message will be shown! Then, if you decrement `counter`,
-Vue.js will hide the message when `counter` gets lower than 10. For that, we
-used the directive `v-if`.
+If you go to the console and start to increment `app.counter`, the message will be shown when the counter goes higher than 10! Then, if you decrement `app.counter`, Vue.js will hide the message again once it's lower than 10. For that, we used the directive `v-if`.
-And you might be wondering if there's an `else` for that `if`. And there is the
-`v-else`. Notice that the `v-else` will always
+You might be wondering if there's an `else` for that `if`. And there is! The `v-else`.
+
+Note that the `v-else` will always:
* expect a `v-if` prior to it
-* refers to the closest `v-if` in the page
+* refer to the closest `v-if` in the page
-Let's alter a little bit our first example to get this straight.
+Let's alter our first example a little bit to get this straight.
```html
- This message is only rendered when the counter is greater than 10
+ The counter is greater than 10!
- And this is the "otherwise" option
+ The counter is less than 10!
```
@@ -65,21 +59,20 @@ let app = new Vue({
});
```
-Play a little with that by changing `counter` values and pay attention to the
+Play a little with that by changing `app.counter` and pay attention to the
message shown.
-Vue.js also has the `v-else-if` directive.
+Vue.js also has the `v-else-if` directive, which works just like `else if` in regular JavaScript.
### Loops
-Vue.js also helps with the generation of multiple copies of the same code
-structure, with loops. The classic example is a list dynamically rendered.
+Vue.js Loops help with the repetition of chunks of code. The classic example is a dynamically rendered list:
```html
-
+
{{ item }}
@@ -100,24 +93,22 @@ let app = new Vue({
});
```
-Way easier than inserting a lot of `
`. And notice that whenever the `list`
-changes, the result will change accordingly. Try it out: open the console and
-`push` some string to the `list` with
+Way easier than inserting a lot of `
`! And notice that whenever the `list` changes, the resulting html will change accordingly. Try it out: open the console and `push` some string to the `list` with
```javascript
app.list.push("something else");
```
-As expected, the page rendered now has our brand new item!
+As expected, the list now has our brand new item!
-### Accessing current index in loops
+### Accessing current index in loops and :key
`v-for` also supports an optional second argument for the index of the current item:
```html
-
+
{{ index }}: {{ item }}
@@ -125,3 +116,8 @@ As expected, the page rendered now has our brand new item!
```
This way, we can use `index` to style the first, last or even/odd list elements differently, or apply extra logic to our component.
+In the example above, check out the `:key` attribute. This is a unique variable that Vue uses to help handle dynamically changing data quickly, without having to spend extra time figuring out what elements to add and remove from the html DOM.
+
+Sometimes, examples will use another variable to pass to `:key`, like a unique ID for each element in a list. We've used a sneaky trick here. You can get the _index_ of the element in an array by using `(element, index) in yourArray`, and set that as the loop's `key`.
+
+You don't absolutely have to use a `key` attribute, but it is _highly_ recommended.