- 4 years ago
- Zaid Bin Khalid
- 6016 Views
-
3
In this session, we are going to learn about condition as well as list rendering in VueJS along with coding and examples.
Conditional
When the condition is met and the conditional check is done with the help of if, if-else, if-else-if, show, etc. Let us initiate with the common example that will explain conditional in detail.
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
As per the above mentioned example, a button and two h1 tags along with message has been created. Furthermore, we had assigned it to h1 tag as expressed in the code below.
<button v-on:click = "showdata" v-bind:style = "styleobj">Click Me</button>
<h1 v-if = "show">This is h1 tag</h1>
Now if you check the value of the variables working correctly as shown in the code then you have to execute the code. So, if it is true then h1 tag will display else in false condition no h1 tag will be displayed.
Following is the display in the browser
This is what we get when show is false, If we check in the browser.
Hence, h1 tag will be removed from the DOM, if the variable displayed as false.
v-else Example
We have added v-else to the second h1 tag, in the following 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 added using the following code:
<h1 v-if = "show">This is h1 tag</h1>
<h2 v-else>This is h2 tag</h2>
Now, This is what we will get in the browser. If the condition is true you will get “This is h1 tag” as your displayed results.
On the contrary, If this lies under false condition then you will get “This is h2 tag” as your displaying result. Shortly, in the output, second statement will be displayed. As expressed in the following screenshot.
v-show Example
v-show work the same as v-if. It also shows and hides the elements based on the condition assigned to it.
The difference between v-if and v-show is that v-if removes the HTML element from the DOM if the condition is false, and adds it back if the condition is true.
Whereas v-show hides the element, if the condition is false with display: none. It shows the element back if the condition is true. Thus, the element is present in the dom always.
<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>
By using the following code, v-show is assigned to the HTML element
<div v-show = "show"><b>V-Show:</b><img src = "images/img.jpg" width = "100" height = "100" /></div>
The image is displayed in the browser when We have used the same variable show and based on it being true or false.
Now, Let us click the button and see the display.
The variable show is false, hence the image is hidden.
List Rendering Example
Now, lets start list rendering with v-for directive
<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>
With the help of a method called showinputvalue, the fruits entered inside the textbox are added to the array using the following piece of code.
showinputvalue : function(event) {
this.items.push(event.target.value);
}
Output
Following is the result in the browser.
- 4 years ago
- Zaid Bin Khalid
- 6016 Views
-
3
