Menu
×
   ❮   
HTML CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C C++ C# BOOTSTRAP REACT MYSQL JQUERY EXCEL XML DJANGO NUMPY PANDAS NODEJS R TYPESCRIPT ANGULAR GIT POSTGRESQL MONGODB ASP AI GO KOTLIN SASS VUE DSA GEN AI SCIPY AWS CYBERSECURITY DATA SCIENCE
     ❯   

Vue Tutorial

Vue HOME Vue Intro Vue Directives Vue v-bind Vue v-if Vue v-show Vue v-for Vue Events Vue v-on Vue Methods Vue Event Modifiers Vue Forms Vue v-model Vue CSS Binding Vue Computed Properties Vue Watchers Vue Templates

Scaling Up

Vue Why, How and Setup Vue First SFC Page Vue Components Vue Props Vue v-for Components Vue $emit() Vue Fallthrough Attributes Vue Scoped Styling Vue Local Components Vue Slots Vue v-slot Vue Scoped Slots Vue Dynamic Components Vue Teleport Vue HTTP Request Vue Template Refs Vue Lifecycle Hooks Vue Provide/Inject Vue Routing Vue Form Inputs Vue Animations Vue Animations with v-for Vue Build Vue Composition API

Vue Reference

Vue Built-in Attributes Vue Built-in Components Vue Built-in Elements Vue Component Instance Vue Directives Vue Instance Options Vue Lifecycle Hooks

Vue Examples

Vue Examples Vue Exercises Vue Quiz Vue Server Vue Certificate

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.


Vue Exercises

Test Yourself With Exercises

Exercise:

Fill in the missing part so that Vue toggles the visibility of the <div> tag below for us, depending on the 'lightOn' boolean data property.

<div id="app">
  <p ="typewritersInStock">
    in stock
  </p>
  <p >
    not in stock
  </p>
</div>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
const app = Vue.createApp({
  data() {
    return {
      typewritersInStock: true
    }
  }
})
app.mount('#app')
</script>

Start the Exercise