From da5284f77283e4f97cf2831242d67ebd100f0cbb Mon Sep 17 00:00:00 2001 From: Jack Date: Sat, 11 May 2019 17:45:40 +0100 Subject: [PATCH] Add information about key binding (#28209) * Add information about key binding Also improved grammar and accuracy of information * fix: removed ===== * Update index.md * Update index.md --- guide/english/vue/control-flow/index.md | 52 ++++++++++++------------- 1 file changed, 24 insertions(+), 28 deletions(-) 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
@@ -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.