Vue.js Rendering
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:
- Conditional Rendering
- 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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Vue.js Events</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<button v-on:click = "showcontent" v-bind:style = "styleobj">Click Here</button><br/>
<span style = "font-size:30px;"><b>{{data}}</b></span>
<h1 v-if = "data">Hi! This is an example of v-if Rendering Function</h1>
</div>
</body>
</html>
Main.js
import Vue from 'vue'
import App from './App'
import router from './router'
Vue.config.productionTip = false
var vm = new Vue({
el: '#app',
data: {
data: true,
styleobj: {
backgroundColor: 'blue',
cursor: 'pointer',
padding: '15px 22px',
verticalAlign: 'middle',
}
},
methods : {
showcontent : function() {
this.data = !this.data;
}
},
});
Output: After executing this code, we will get the output, as shown below:
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.
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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Vue.js Events</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<button v-on:click = "showcontent" v-bind:style = "styleobj">Click Here</button><br/>
<span style = "font-size:25px;"><b>{{show}}</b></span>
<h1 v-if = "show">Hi! This is an example of v-if Rendering Function</h1>
<h1 v-else>Hi! This is an example of v-else Rendering Function</h1>
</div>
</body>
</html>
Main.js
import Vue from 'vue'
import App from './App'
import router from './router'
Vue.config.productionTip = false
var vm = new Vue({
el: '#app',
data: {
show: true,
styleobj: {
backgroundColor: 'blue',
cursor: 'pointer',
padding: '15px 22px',
verticalAlign: 'middle',
}
},
methods : {
showcontent : function() {
this.show = !this.show;
}
},
});
Output: After executing this code, we will get output, as shown below:
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.
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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Vue.js Events</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<button v-on:click = "showcontent" v-bind:style = "styleobj">Click Here</button><br/>
<span style = "font-size:25px;"><b>{{data}}</b></span>
<h1 v-if = "data">Hi! This is an example of v-if Rendering Function</h1>
<h1 v-else>Hi! This is an example of v-else Rendering Function</h1>
<div v-show ="data">
<b>Show:</b><br/>
<img src= "C:\Users\hp\myproject\images.jpg" width= "150" height= "200" />
</div>
</div>
</body>
</html>
Main.js
import Vue from 'vue'
import App from './App'
import router from './router'
Vue.config.productionTip = false
var vm = new Vue({
el: '#app',
data: {
data: true,
styleobj: {
backgroundColor: 'blue',
cursor: 'pointer',
padding: '15px 22px',
verticalAlign: 'middle',
}
},
methods : {
showcontent : function() {
this.data = !this.data;
}
},
});
Output: After executing this code, we will get output, as shown below;
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.
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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Vue.js Rendering</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<input type = "text" v-on:keyup.enter = "showinputvalue"
v-bind:style = "styleobj" placeholder = "Enter Courses Names"/>
<h1 v-if = "items.length>0">Language Courses Name</h1>
<ul>
<h2> <li v-for = "list in items">{{list}}</li> </h2>
</ul>
</div>
</div>
</body>
</html>
Main.js
import Vue from 'vue'
import App from './App'
import router from './router'
Vue.config.productionTip = false
var vm = new Vue({
el: '#app',
data: {
items:[],
styleobj: {
width: "38%",
padding: "15px 22px",
margin: "10px",
boxSizing: "border-box"
}
},
methods : {
showinputvalue : function(event) {
this.items.push(event.target.value);
}
},
});
Output: After executing this code, we will get output, as shown below:
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.
