Vue v-if Directive
It is a lot easier to create an HTML element depending on a condition in Vue with the v-if directive than with plain JavaScript.
With Vue you just write the if-statement directly in the HTML element you want to create conditionally. It's that simple.
Conditional Rendering in Vue
Conditional rendering in Vue is done by using the v-if, v-else-if and v-else directives.
Conditional rendering is when an HTML element is created only if a condition is true, i.e. create the text "In stock" if a variable is 'true', or 'Not in stock' if that variable is 'false'.
Example
Write different messages depending on whether there are any typewriters in stock or not:
<p v-if="typewritersInStock">
in stock
</p>
<p v-else>
not in stock
</p>
Try it Yourself »
Conditions in Vue
A condition, or "if-statement", is something that is either true or false.
A condition is often a comparison check between two values like in the example above to see if one value is greater than the other.
We use comparison operators like
<,>=or!==to do such checks.Comparison checks can also be combined with logical operators such as
&&or||.Go to our JavaScript tutorial page to find out more about JavaScript comparisons.
We can use the number of typewriters in storage with a comparison check to decide if they are in stock or not:
Example
Use a comparison check to decide whether to write "In stock" or "Not in stock" depending on the number of typewriters in storage.
<p v-if="typewriterCount > 0">
in stock
</p>
<p v-else>
not in stock
</p>
Try it Yourself »
Directives for Conditional Rendering
This overview describes how the different Vue directives used for conditional rendering are used together.
| Directive | Details |
|---|---|
v-if |
Can be used alone, or with v-else-if and/or v-else. If the condition inside v-if is 'true', v-else-if or v-else are not considered. |
v-else-if |
Must be used after v-if or another v-else-if. If the condition inside v-else-if is 'true', v-else-if or v-else that comes after are not considered. |
v-else |
This part will happen if the first part of the if-statement is false. Must be placed at the very end of the if-statement, after v-if and v-else-if. |
To see an example with all three directives shown above, we can expand the previous example with v-else-if so that the user sees 'In stock', 'Very few left!' or 'Out of stock':
Example
Use a comparison check to decide whether to write "In stock", "Very few left!" or "Not in stock" depending on the number of typewriters in storage.
<p v-if="typewriterCount>3">
In stock
</p>
<p v-else-if="typewriterCount>0">
Very few left!
</p>
<p v-else>
Not in stock
</p>
Try it Yourself »
Use The Return Value from a Function
Instead of using a comparison check with the v-if directive, we can use the 'true' or 'false' return value from a function:
Example
If a certain text contains the word 'pizza', create a <p> tag with an appropriate message. The 'includes()' method is a native JavaScript method that checks if a text contain certain words.
<div id="app">
<p v-if="text.includes('pizza')">The text includes the word 'pizza'</p>
<p v-else>The word 'pizza' is not found in the text</p>
</div>
data() {
return {
text: 'I like taco, pizza, Thai beef salad, pho soup and tagine.'
}
}
Try it Yourself »
The example above can be expanded to show that v-if also can create other tags like <div> and <img> tags:
Example
If a certain text contains the word 'pizza', create a <div> tag with a pizza image and a <p> tag with a message. The 'includes()' method is a native JavaScript method that check if a text contain certain words.
<div id="app">
<div v-if="text.includes('pizza')">
<p>The text includes the word 'pizza'</p>
<img src="img_pizza.svg">
</div>
<p v-else>The word 'pizza' is not found in the text</p>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
const app = Vue.createApp({
data() {
return {
text: 'I like taco, pizza, Thai beef salad, pho soup and tagine.'
}
}
})
app.mount('#app')
</script>
Try it Yourself »
Below the example is expanded even more.
Example
If a certain text contains the word 'pizza' or 'burrito' or none of these words, different images and texts will be created.
<div id="app">
<div v-if="text.includes('pizza')">
<p>The text includes the word 'pizza'</p>
<img src="img_pizza.svg">
</div>
<div v-else-if="text.includes('burrito')">
<p>The text includes the word 'burrito', but not 'pizza'</p>
<img src="img_burrito.svg">
</div>
<p v-else>The words 'pizza' or 'burrito' are not found in the text</p>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
const app = Vue.createApp({
data() {
return {
text: 'I like taco, pizza, Thai beef salad, pho soup and tagine.'
}
}
})
app.mount('#app')
</script>
Try it Yourself »
With Vue we can now write code that create elements under certain conditions in a much easier way than with traditional JavaScript.
