Vue.js Rendering

Vue rendering is an important feature of the Vue.js framework. A rendering function applies to each Vue component. In most cases, the Vue compiler will create the function. When you specify a template on the component, the Vue compiler will process the contents of this template, which returns a rendering function. The render function provides a virtual DOM node that will be rendered in the browser DOM by the Vue function.

Here, we are going to discuss the types of Vue.js Rendering. Vue.js rendering is of two types, which are as follows:

  1. Conditional Rendering
  2. List Rendering

Conditional Rendering

In conditional rendering, we are going to discuss about the v-if, v-else, v-else-if, v-if-else-if, v-show, etc.

V-if

This directive is used to conditionally render a block in the Vue component. The block will only be rendered if the expression of the directive returned a true value.

Example: This example explains how we can use the v-if condition render in the Vue.js application.

Index.html

Main.js

Output: After executing this code, we will get the output, as shown below:

Vue.js Rendering

In the above screenshot, the condition of the block is true, and it displays the data. If we press the Click Here button, the condition of the block will be false, and data will not be displayed.

Vue.js Rendering

V-else

The v-else directive can be used to indicate an “else block” for the “v-if” directive. In the Vue.js application, a v-else directive must follow a v-if or v-else-if directive immediately; otherwise, it will not be defined. This v-else directive works with “v-if” and “v-else” condition. If the condition is true, the data shows the “v-if” condition. On the other hand, if the condition is false, the data shows a “v-else” condition.

Example: This example explains how we can use the v-else directive in the Vue.js application.

Index.html

Main.js

Output: After executing this code, we will get output, as shown below:

Vue.js Rendering

Now, if the show condition is true, the content “Hi! This is an example of v-if Rendering Function” will be displayed. When we click on the “Click Here” button, the show condition becomes false, and then the content “Hi! This is an example of a v-else Rendering Function” will be displayed on the screen, as shown below.

Vue.js Rendering

V-else-if

This v-else-if directive is used to work as an “else if block” for the v-if directive. It can be used multiple times as a chained.

V-show

The v-show directive behaves similarly as a v-if directive. It shows and hides the components based on the condition which is assigned to it. The main difference between the v-show and v-if directive is that the “v-if” directive removes the HTML element from the DOM if the condition is false, and if the condition is true, it includes the elements again. On the other side, “v-show” hides the HTML elements from the DOM if the condition is false, and if the condition is true, it shows the HTML elements again. Due to this feature, these elements are always available in the DOM.

Example: This example explains how we can use the v-show directive in the Vue.js application.

Index.html

Main.js

Output: After executing this code, we will get output, as shown below;

Vue.js Rendering

Now, if the show condition is true, the content “Hi! This is an example of v-if Rendering Function”, and the image will be displayed. When we click on the “Click Here” button, the show condition will become false, and then the content “Hi! This is an example of a v-else Rendering Function” will be displayed on the screen, as shown below.

Vue.js Rendering

Note: The v-show directive doesn’t support the <template> component, nor works with the “v-else” directive.

List Rendering

In List Rendering, we are going to discuss the use of v-for directive in the Vue.js application.

V-for

The v-for directive is used to present the item list based on the array in an application. The v-for directive needs a special syntax in the items of the list, where the data source array is a list item, and items are an alias for the array element.

For the v-for directive blocks, we have complete access to parent scope properties. The v-for directive also supports a second optional statement for the index of the current item list.

Example: This example explains how we can use the v-for directive in the Vue.js application.

Index.html

Main.js

Output: After executing this code, we will get output, as shown below:

Vue.js Rendering

In the above screenshot, we can see that there is a textbox name “Enter Courses Names”.  Here, when we enter the curse name and press the enter key, it shows the list of items that we have entered in the textbox. It can be shown in the below screenshot.

Vue.js Rendering

Pin It on Pinterest

Share This