freeCodeCamp/guide/english/vue/control-flow/index.md

title

title
Control Flow

Control Flow

Conditionals

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.

Let's make a simpler example. We want to condition the exibition of a message to a counter:

<div id="app">
  <p v-if="counter > 10">
    The counter is greater than 10!
  </p>
</div>

let app = new Vue({
  el: '#app',
  data: {
    counter: 0
  }
});

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.

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
• refer to the closest v-if in the page

Let's alter our first example a little bit to get this straight.

<div id="app">
  <button type="button" @click="counter = counter + 1">Click Me!</button>
  <p v-if="counter > 10">
    The counter is greater than 10!
  </p>
  <p v-else>
    The counter is less than 10!
  </p>
</div>

let app = new Vue({
  el: '#app',
  data: {
    counter: 0
  }
});

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, which works just like else if in regular JavaScript.

Loops

Vue.js Loops help with the repetition of chunks of code. The classic example is a dynamically rendered list:

<div id="app">
  <ul>
    <li v-for="(item, index) in list" :key="index">
      {{ item }}
    </li>
  </ul>
</div>

let app = new Vue({
  el: '#app',
  data: {
    list: [
      "shave",
      "do the dishes",
      "clean the sink",
      "pay the bill"
    ]
  }
});

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

app.list.push("something else");

As expected, the list now has our brand new item!

Accessing current index in loops and :key

v-for also supports an optional second argument for the index of the current item:

<div id="app">
  <ul>
    <li v-for="(item, index) in items" :key="index">
      {{ index }}: {{ item }}
    </li>
  </ul>
</div>

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.