2.8 KiB
title |
---|
Control Flow |
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.
But let's make a simpler example. We want a condition that determines what is displayed, using a counter:
<div id="app">
<p v-if="counter > 10">
This message is only rendered when 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 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
.
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
- expect a
v-if
prior to it - refers to the closest
v-if
in the page
Let's alter a little bit our first example to get this straight.
<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
</p>
<p v-else>
And this is the "otherwise" option
</p>
</div>
let app = new Vue({
el: '#app',
data: {
counter: 0
}
});
Play a little with that by changing counter
values and pay attention to the
message shown.
Vue.js also has the v-else-if
directive.
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.
<div id="app">
<ul>
<li v-for="item in list">
{{ 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 result 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 page rendered now has our brand new item!
Accessing current index in loops
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">
{{ 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.