gaspersic/freeCodeCamp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Add information about key binding (#28209)

Browse Source 
* Add information about key binding

Also improved grammar and accuracy of information

* fix: removed =====

* Update index.md

* Update index.md
This commit is contained in:
Jack
2019-05-11 17:45:40 +01:00
committed by The Coding Aviator
parent 1da5d765e9
commit da5284f772
1 changed files with 24 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
guide/english/vue/control-flow/index.md
View File

@ -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
<div id="app">
<p v-if="counter > 10">
This message is only rendered when the counter is greater than 10
The counter is greater than 10!
</p>
</div>
```
@ -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
<div id="app">
<button type="button" @click="counter = counter + 1">Click Me!</button>
<p v-if="counter > 10">
This message is only rendered when the counter is greater than 10
The counter is greater than 10!
</p>
<p v-else>
And this is the "otherwise" option
The counter is less than 10!
</p>
</div>
```
@ -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
<div id="app">
<ul>
<li v-for="item in list">
<li v-for="(item, index) in list" :key="index">
{{ item }}
</li>
</ul>
@ -100,24 +93,22 @@ let app = new Vue({
});
```
Way easier than inserting a lot of `<li>`. 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 `<li>`! 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
<div id="app">
<ul>
<li v-for="(item, index) in items">
<li v-for="(item, index) in items" :key="index">
{{ index }}: {{ item }}
</li>
</ul>
@ -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.