Vue v-if
Using Vue’s v-if directive, creating an HTML element based on a condition is far simpler than using standard JavaScript.
You may create a conditionally-linked HTML element by simply writing the if-statement within it using Vue. That’s how easy it is.
Conditional Rendering in Vue
The v-if, v-else-if, andS directives in Vue are used to accomplish conditional rendering.
When a condition is true, an HTML element is only constructed (conditional rendering). For example, if a variable is set to “true,” it will create the text “In stock,” and if it is set to “false,” it will create the text “Not in stock.”
Example
Depending on whether typewriters are available, compose distinct messages:
<p v-if="typewritersInStock">
in stock
</p>
<p v-else>
not in stock
</p>
Conditions in Vue
A “if-statement” or condition is a binary statement that can be true or false.
As in the previous example, a condition is typically a comparison check to determine if one number is bigger than the other.
- To perform such tests, we employ comparison operators such as <, >= or !==.
- Logical operators like && or || can also be used in conjunction with comparison tests.
- To learn more about JavaScript comparisons, see our website dedicated to JavaScript tutorials.
To determine whether or not they are in stock, we can utilize the quantity of typewriters in storage along with a comparison check:
Example
Depending on how many typewriters are kept in storage, use a comparison check to determine whether to write “In stock” or “Not in stock.”
<p v-if="typewriterCount > 0">
in stock
</p>
<p v-else>
not in stock
</p>
Directives for Conditional Rendering
This overview explains the combined usage of the several Vue directives used in conditional rendering.
| 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. |
We can extend the above example with v-else-if to see an example with all three of the aforementioned directives, displaying ‘In stock,’ ‘Very few left!,’ or ‘Out of stock’ to the user:
Example
Depending on how many typewriters are in storage, use a comparison check to determine whether to write “In stock,” “Very few left!” or “Not in stock”.
<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>
Use The Return Value from a Function
The ‘true’ or ‘false’ return value from a function can be used in place of a comparison check using the v-if directive:
Example
If the word “pizza” appears in a particular text, add a <p> tag with a suitable message. One native JavaScript way for determining whether a text contains specific terms is ‘includes()’.
<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.'
}
}
Expanding on the previous example, we can see that v-if can also generate other tags, such as <div> and <img> tags:
Example
Make a <div> tag with an image of pizza and a <p> tag with a message if a particular text contains the word “pizza.” A native JavaScript technique for determining whether a text contains specific terms is called “includes().”
<div id="app">
<div v-if="text.includes('pizza')">
<p>The text includes the word 'pizza'</p>
<img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" alt="Vue V-If -" title="Vue V-If 1" data-lazy-src="img_pizza.svg"><noscript><img decoding="async" src="img_pizza.svg" alt="Vue V-If -" title="Vue V-If 1"></noscript>
</div>
<p v-else>The word 'pizza' is not found in the text</p>
</div>
<script data-minify="1" src="https://codingask.com/wp-content/cache/min/1/vue@3/dist/vue.global.js?ver=1730183021" defer></script>
<script>
const app = Vue.createApp({
data() {
return {
text: 'I like taco, pizza, Thai beef salad, pho soup and tagine.'
}
}
})
app.mount('#app')
</script>
The example is further elaborated below.
Example
Different images and texts will be generated depending on whether a given text contains the term “pizza,” “burrito,” or none of these words.
<div id="app">
<div v-if="text.includes('pizza')">
<p>The text includes the word 'pizza'</p>
<img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" alt="Vue V-If -" title="Vue V-If 1" data-lazy-src="img_pizza.svg"><noscript><img decoding="async" src="img_pizza.svg" alt="Vue V-If -" title="Vue V-If 1"></noscript>
</div>
<div v-else-if="text.includes('burrito')">
<p>The text includes the word 'burrito', but not 'pizza'</p>
<img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" alt="Vue V-If -" title="Vue V-If 3" data-lazy-src="img_burrito.svg"><noscript><img decoding="async" src="img_burrito.svg" alt="Vue V-If -" title="Vue V-If 3"></noscript>
</div>
<p v-else>The words 'pizza' or 'burrito' are not found in the text</p>
</div>
<script data-minify="1" src="https://codingask.com/wp-content/cache/min/1/vue@3/dist/vue.global.js?ver=1730183021" defer></script>
<script>
const app = Vue.createApp({
data() {
return {
text: 'I like taco, pizza, Thai beef salad, pho soup and tagine.'
}
}
})
app.mount('#app')
</script>
It is now much simpler to build code that creates items under specific conditions using Vue than it is with standard JavaScript.
