Vuejs Course


Vue.js contains a set of core directives to show or hide elements based on conditions: v-if, v-else, v-else-if and v-show.

The v-if directive

The v-if directive adds or removes DOM elements based on the value true or false of the given expression.

- Syntax:
<div v-if='can_add'>content</div>
If the "can_add" is True that element is added in HTML DOM, if it is False the element is deleted.

- Example:
<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>

Conditional Groups with v-if on <template>

The 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.

- Example:
<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>

The v-else directive

The 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.

- Example:
<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>

The v-else-if directive

The v-else-if can be used when we need more than two options to be checked.
A v-else-if element must immediately follow a v-if or a v-else-if element.

- Example:
<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>

The v-show directive

The effect of v-show directive is similar to v-if, it can be used to hide and show an element based on an expression.
Here is the differences between the two:

- Example:
<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.

Daily Test with Code Example

HTML
CSS
JavaScript
PHP-MySQL
Which tag adds an image in web page?
<div> <img> <span>
<img src="http://coursesweb.net/imgs/webcourses.gif" width="191" height="63" alt="Courses-Web" />
Which of these CSS codes displays the text oblique?
font-style: italic; text-decoration: underline; font-weight: 500;
#id {
  font-style: italic;
}
Click on the jQuery function used to hide with animation a HTML element.
click() hide() show()
$(document).ready(function() {
  $(".a_class").click(function(){ $(this).hide("slow"); });
});
Click on the correctly defined function in PHP.
fname function() {} function fname() {} function $fname() {};
function fname($a, $b) {
  echo $a * $b;
}
Conditional Directives v-if, v-else, v-show

Last accessed pages

  1. PHP getElementById and getElementsByTagName (40134)
  2. Common PHP Errors and Solutions (7933)
  3. MySQL Query Builder: Insert, Update, Delete (781)
  4. Node.js Move and Copy Directory (9525)
  5. Change CSS file with jQuery (4291)

Popular pages this month

  1. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (630)
  2. Read Excel file data in PHP - PhpExcelReader (421)
  3. PHP-MySQL free course, online tutorials PHP MySQL code (378)
  4. querySelector and querySelectorAll (368)
  5. PHP Unzipper - Extract Zip, Rar Archives (359)