v-if, v-else, v-else-if and v-show.
v-if directive adds or removes DOM elements based on the value true or false of the given expression.
<div id='demo'>
<div v-if='can_add'>Forgiveness is healing.</div>
Click to <button @click='addRem'>Add/Remove</button>
</div>
<script>
var vm = new Vue({
el: '#demo',
data:{ can_add:false },
methods:{
addRem:function(){
this.can_add = !this.can_add; //switch true /false
}
}
});
</script>
v-if directive can only be attached to a single element, but you can also control multiple elements with a single v-if. To do this, wrap all the elements in a <template> element.
<div id='demo'>
<template v-if='can_add'>
<h4>Forgiveness is healing.</h4>
<h4>Healing is forgiveness.</h4>
</template>
Click to <button @click='addRem'>Add/Remove</button>
</div>
<script>
var vm = new Vue({
el: '#demo',
data:{ can_add:false },
methods:{
addRem:function(){
this.can_add = !this.can_add; //switch true /false
}
}
});
</script>
v-else directive is used to add content only when the expression adjacent v-if resolves to false.v-else does not need a value passed in to it. But it must be in an element that comes immediately after an element containing v-if or v-else-if directives.
<div id='demo'>
<h4 v-if='can_add'>This is in tag with v-if.</h4>
<h4 v-else>This content is from v-else.</h4>
Click to <button @click='addRem'>Toggle message</button>
</div>
<script>
var vm = new Vue({
el: '#demo',
data:{ can_add:false },
methods:{
addRem:function(){
this.can_add = !this.can_add; //switch true /false
}
}
});
</script>
v-else-if can be used when we need more than two options to be checked.v-else-if element must immediately follow a v-if or a v-else-if element.
<div id='demo'>
<h4 v-if='rest ==1'>This is in the tag with v-if, rest ={{rest}}.</h4>
<h4 v-else-if='rest ==2'>This is from v-else-if, rest ={{rest}}.</h4>
<h4 v-else>This content is from v-else, rest not 1 or 2; rest ={{rest}}.</h4>
Click to <button @click='addRem'>Alternate elements</button>
</div>
<script>
var vm = new Vue({
el: '#demo',
data:{ rest:0, nr:0 },
methods:{
addRem:function(){
this.nr++;
this.rest = this.nr %3;
}
}
});
</script>
v-show directive is similar to v-if, it can be used to hide and show an element based on an expression.v-if only renders the element to the DOM if the expression is True; but, an element with v-show will always be rendered and remain in the DOM; v-show only toggles the display CSS property of the element.v-show does not support v-else, v-else-if.v-show does not support <template> elements.
<div id='demo'>
<h4 v-show='can_show'>Observing leads to healing.</h4>
Click to <button @click='addRem'>Show /Hide</button>
</div>
<script>
var vm = new Vue({
el: '#demo',
data:{ can_show:false },
methods:{
addRem:function(){
this.can_show = !this.can_show; //switch true /false
}
}
});
</script>
The v-show has a performance advantage if the elements are switched on and off frequently, while the v-if has the advantage when it comes to initial render time.
<p>Address: <strong>http://CoursesWeb.net/</strong> - Tutorials.</p>
#id {
font-weight: 800;
}function someFunction() { alert("CoursesWeb.net"); }
setInterval("someFunction()", 2000);$vname = 8; echo $vname;