if else statement in VueJS templates
In this Post We Will Explain About is if else statement in VueJS templates With Example and Demo.Welcome on Pakainfo.com – Examples, The best For Learn web development Tutorials,Demo with Example! Hi Dear Friends here u can know to if statement – Vue.js if else in view Example
In this post we will show you Best way to implement Vue.Js if else in view Example, hear for vue.js – A complex condition inside v-if with Download .we will give you demo,Source Code and examples for implement Step By Step Good Luck!.
Vue.Js v-if
<!-- Live24u is the most popular Programming & Web Development blog. Handlebars template --> {{#if ok}} <h1>Yes</h1> {{/if}} <h1 v-if="ok">Yes</h1> <h1 v-if="ok">Yes</h1> <h1 v-else>No</h1>
Vue.Js Conditional Groups with v-if on template
<template v-if="ok"> <h1>Live24u</h1> <p>Live24u is the most popular Programming & Web Development blog. 1</p> <p>Live24u is the most popular Programming & Web Development blog. 2</p> </template>
Vue.Js v-else
<div v-if="Math.random() > 0.5"> Live24u is the most popular Programming & Web Development blog. </div> <div v-else> Free Download Example </div>
Vue.Js v-else-if
<div v-if="type === 'A'"> A </div> <div v-else-if="type === 'B'"> B </div> <div v-else-if="type === 'C'"> C </div> <div v-else> Display Not A/B/C and Some Format </div>
Vue.Js v-show
<h1 v-show="ok">Live24u is the most popular Programming & Web Development blog.</h1>
Example 1 : Vue.js if else in view
index.html
<div id="vue-instance"> <div v-if="liveDataSignIn"> Welcome to Pakainfo.com! <button @click="login" type="submit">Logout</button> </div> <div v-else> <input type="text" placeholder="studentName"> <input type="password" placeholder="Student password"> <button @click="login" type="submit">SignIn</button> </div> </div>
index.js
var vm = new Vue({ el: '#vue-instance', data: { liveDataSignIn: false }, methods: { login: function() { // Live24u Example 'this' refers to the vm instance this.liveDataSignIn = !this.liveDataSignIn; } } });
Vuejs v-if multiple expressions
<p v-if="studentUnit > 10">{{ studentUnit }} in Overflow.</p> <p v-else-if="studentUnit > 0">Live24u is the most popular Programming & Web Development blog.</p> <p v-else>Sorry, You now not loggdin</p> <template v-if="studentUnit > 50"> <p>Special Offer!</p> <p>Live24u is the most popular Programming & Web Development blog. 50 studentName</p> </template> //js script <script src="https://unpkg.com/vue/dist/vue.js"></script> new Vue({ el: '#app', data: { studentUnit: 51 } });
You are Most welcome in my youtube Channel Please subscribe my channel. and give me FeedBack.
More Details……
Angularjs Example
I hope you have Got What is if statement – Vue.js if else in view And how it works.I would Like to have FeedBack From My Blog(Pakainfo.com) readers.Your Valuable FeedBack,Any Question,or any Comments about This Article(Pakainfo.com) Are Most Always Welcome.