Vue JS Part: 8 (VueJS Conditional Rendering)

VueJS Conditional Rendering

VueJS v-if, v-else-if and v-else Directive

To control the output of any HTML element in VueJS, you need to use v-if, v-else-if, v-else directives. And it works just like a v-show. However, it supports the <template> element. See the v-if example below:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html lang="en">
<head>
   <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
     <div id="app">
         <div v-if="show">Hello World!</div>
     </div>
     <script>
     new Vue ({
            el: '#app',
        data: {
                show: false
        }
             })
   </script>
 </body>
</html>

Now the word “Hello World” will not be displayed. Because here the value of show is set to false.

And if you set the value of show to true, it will display the word “Hello World”.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html lang="en">
<head>
   <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
     <div id="app1">
       <div v-if="show">Hello World!</div>
     </div>
     <script>
     new Vue ({
          el: '#app1',
    data: {
            show: true
    }
             })
   </script>
 </body>
</html>

Let us see examples of v-else-if and v-else:

<html>
   <head>
      <title>VueJs v-if,v-else-if and v-else attribute</title>
       <script type = "text/javascript" src = "https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
   </head>
   <body>
  <div id="app-3">
    <div v-if="age>0 && age<=15">Your're Child</div>
    <div v-else-if="age>15 && age<=25">You're Young</div>
    <div v-else-if="age>25 && age<=40">You're Adult</div>
    <div v-else> You're Old man or not birth yet  </div>
  </div>
      <script type = "text/javascript">
         var app = new Vue({
            el: '#app-3',
           data: {
            age: 36,
            }
         });
      </script>
   </body>
</html>

Output

You’re Adult

See another example:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<html>
   <head>
      <title>VueJs v-if,v-else-if and v-else attribute</title>
       <script type = "text/javascript" src = "https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
   </head>
   <body>
  <div id="app-3">
    <template v-if="loginType === 'username'">
      <label>Username</label>
      <input placeholder="Enter your username">
    </template>
    <template v-else-if="loginType === 'key'">
      <label>Key</label>
      <input placeholder="Enter your Key">
    </template>
    <template v-else>
      <label>Email</label>
      <input placeholder="Enter your email address">
  </template>
  </div>
      <script type = "text/javascript">
         var app = new Vue({
            el: '#app-3',
           data: {
            loginType: 'username',
            }
         });
      </script>
   </body>
</html>