We now have a youtube channel. Subscribe!

Vue.js | Rendering

Vue.js | Rendering


Hello folks! Welcome back to a new section of our tutorial on Vue.js. In this tutorial post, we will be studying about Vue.js Rendering.

We're going to be learning about conditional rendering and list rendering in this article. In conditional rendering, we will discuss about using if, if-else, if-else-if, show, and so on. In list rendering, we will be discussing how to make use of for loop.

Conditional Rendering

Let us get started and work on an example first to illustrate the details for conditional rendering. Using conditional rendering, we want to output just when the given condition is met and the conditional check is done via the help of if, if-else, if-else-if, show, etc.

v-if

Example

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "databinding">
         <button v-on:click = "showdata" v-bind:style = "styleobj">Click Me</button>
         <span style = "font-size:25px;"><b>{{show}}</b></span>
         <h1 v-if = "show">This is h1 tag</h1>
         <h2>This is h2 tag</h2>
      </div>
      <script type = "text/javascript">
         var vm = new Vue({
            el: '#databinding',
            data: {
               show: true,
               styleobj: {
                  backgroundColor: '#2196F3!important',
                  cursor: 'pointer',
                  padding: '8px 16px',
                  verticalAlign: 'middle',
               }
            },
            methods : {
               showdata : function() {
                  this.show = !this.show;
               }
            },
         });
      </script>
   </body>
</html>

Output

Following is the output of the above code -

v-if

In the above code, we have created a button and two h1 tags with the message.

A variable called show is declared and then initialized to a value true. It is shown close to the button. On the click of the button, we are calling a method called showdata, which toggles the value of the variable show. This simply means on the click of the button, the value of the variable show will change from true to false and false to true.

We have assigned if to the h1 tag as shown in the following code snippet.

<button v-on:click = "showdata" v-bind:style = "styleobj">Click Me</button>
<h1 v-if = "show">This is h1 tag</h1>

Now what it will do is, it will check the value of the variable show and If it is true the h1 tag will be shown. Click the button and view in the web browser, as the value of the show variable changes to false, the h1 tag is not displayed in the browser. It is displayed only when the show variable is true.

Output

Following is the display in the browser.

show_tag

If we check in the web browser, this is what we get when show is false.

show_false

The h1 tag is removed from the DOM when the variable show is set to false.

h1_tag_removed

This's what we see when the variable is true. The h1 tag is added back to the DOM when the variable show is set to true.


v-else

In the following example, we have included v-else to the second h1 tag.

Example

Following below is a simple example -

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "databinding">
         <button v-on:click = "showdata" v-bind:style = "styleobj">Click Me</button>
         <span style = "font-size:25px;"><b>{{show}}</b></span>
         <h1 v-if = "show">This is h1 tag</h1>
         <h2 v-else>This is h2 tag</h2>
      </div>
      <script type = "text/javascript">
         var vm = new Vue({
            el: '#databinding',
            data: {
               show: true,
               styleobj: {
                  backgroundColor: '#2196F3!important',
                  cursor: 'pointer',
                  padding: '8px 16px',
                  verticalAlign: 'middle',
               }
            },
            methods : {
               showdata : function() {
                  this.show = !this.show;
               }
            },
         });
      </script>
   </body>
</html>

v-else is included using the following code snippet.

<h1 v-if = "show">This is h1 tag</h1>
<h2 v-else>This is h2 tag</h2>

Now, if show is true "This is h1 tag" will be displayed, and if false "This is h2 tag" will be displayed. This is what we will get in the browser.

v_if_true

The above result is when the show variable is true. Since we've added v-else, the second statement isn't present. Now, when we click on the button the show variable will become false and the second statement is going to be displayed as shown below.

v_if_false

v-show

v-show acts same as v-if. It also shows and hides the elements based on the condition assigned to it. The differences between v-if and v-show is that v-if removes the HTML element from the DOM if the condition given is false, and adds it back if the condition is true. Whereas v-show hides the element, if the condition given is false via display:none. It shows the element back, if condition given is true. Thus, the element is always present in the DOM always.

Example

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "databinding">
         <button v-on:click = "showdata" v-bind:style = "styleobj">Click Me</button>
         <span style = "font-size:25px;"><b>{{show}}</b></span>
         <h1 v-if = "show">This is h1 tag</h1>
         <h2 v-else>This is h2 tag</h2>
         <div v-show = "show">
            <b>V-Show:</b>
            <img src = "images/img.jpg" width = "100" height = "100" />
         </div>
      </div>
      <script type = "text/javascript">
         var vm = new Vue({
            el: '#databinding',
            data: {
               show: true,
               styleobj: {
                  backgroundColor: '#2196F3!important',
                  cursor: 'pointer',
                  padding: '8px 16px',
                  verticalAlign: 'middle',
               }
            },
            methods : {
               showdata : function() {
                  this.show = !this.show;
               }
            },
         });
      </script>
   </body>
</html>

v-show is assigned to the HTML element via the following code snippet.

<div v-show = "show"><b>V-Show:</b><img src = "images/img.jpg" width = "100" height = "100" /></div>

We've used same variable show and based on it being true/false, the image is displayed in the browser.

image_true

Since the variable show is true, the image is as displayed in the above screenshot. Let's click the button and see the display.

button

The variable show is false, hence the image is hidden. If we inspect and see the element, the div along with the image is still a part of the DOM with the style property display:none as seen in the above screenshot.


List Rendering

v-for

Let us now discuss list rendering with v-for directive.

Example

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "databinding">
         <input type = "text" v-on:keyup.enter = "showinputvalue"
            v-bind:style = "styleobj" placeholder = "Enter Fruits Names"/>
         <h1 v-if = "items.length>0">Display Fruits Name</h1>
         <ul>
            <li v-for = "a in items">{{a}}</li>
         </ul>
      </div>
      <script type = "text/javascript">
         var vm = new Vue({
            el: '#databinding',
            data: {
               items:[],
               styleobj: {
                  width: "30%",
                  padding: "12px 20px",
                  margin: "8px 0",
                  boxSizing: "border-box"
               }
            },
            methods : {
               showinputvalue : function(event) {
                  this.items.push(event.target.value);
               }
            },
         });
      </script>
   </body>
</html>

A variable known as items is declared as an array. In methods, there is a method known as showinputvalue, which is assigned to the input box that takes the names of the fruits. In the method, the fruits entered inside the textbox are included to the array using the following piece of code.

showinputvalue : function(event) {
   this.items.push(event.target.value);
}

We've used v-for to show the fruits entered as in the following piece of code. v-for helps to iterate over the values that are present in the array.

<ul>
   <li v-for = "a in items">{{a}}</li>
</ul>

To iterate over the array with for loop, we've to use v-for = "a in items" where a holds the values in the array and will display till all the items are done.

Output

Following is the output in the browser.

v-for

On inspecting the items, this i what it shows in the browser. In the DOM, we don't see any v-for directive to the li element. It shows the DOM without any Vue.js directives.

v_for_directives

If we wish to display the index of the array, it is done using the following code.

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "databinding">
         <input type = "text" v-on:keyup.enter = "showinputvalue"
            v-bind:style = "styleobj" placeholder = "Enter Fruits Names"/>
         <h1 v-if = "items.length>0">Display Fruits Name</h1>
         <ul>
            <li v-for = "(a, index) in items">{{index}}--{{a}}</li>
         </ul>
      </div>
      <script type = "text/javascript">
         var vm = new Vue({
            el: '#databinding',
            data: {
               items:[],
               styleobj: {
                  width: "30%",
                  padding: "12px 20px",
                  margin: "8px 0",
                  boxSizing: "border-box"
               }
            },
            methods : {
               showinputvalue : function(event) {
                  this.items.push(event.target.value);
               }
            },
         });
      </script>
   </body>
</html>

To get the index, we have added one more variable in the bracket as shown in the piece of code below.

<li v-for = "(a, index) in items">{{index}}--{{a}}</li>

In (a, index), a is the value and index is the key. The web browser display will now be as shown in the below screenshot. Hence, with the help of index, any specific values can be displayed.



Alright guys! This is where we are going to be rounding up for this tutorial. In our next tutorial, we will be discussing about Vue.js Transition and Animation.

Feel free to ask your questions where necessary and we will attend to them as soon as possible. If this tutorial was helpful to you, you can use the share button to share this tutorial.

Follow us on our various social media platforms to stay updated with our latest tutorials. You can also subscribe to our newsletter in order to get our tutorials delivered directly to your emails.

Thanks for reading and bye for now.

Post a Comment

Hello dear readers! Please kindly try your best to make sure your comments comply with our comment policy guidelines. You can visit our comment policy page to view these guidelines which are clearly stated. Thank you.
© 2022 ‧ WebDesignTutorialz. All rights reserved. Developed by Jago Desain