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. Detect when ScrollBar reaches the bottom of the page (3655)
  2. AJAX Course, free Lessons (16915)
  3. Get the value of multiple selected checkboxes with same name (6661)
  4. PhpSpreadsheet - Read, Write Excel and LibreOffice Calc files (23520)
  5. Horizontal-Vertical Menu with Arrow Keys Navigation (3000)

Popular pages this month

  1. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (780)
  2. PHP Unzipper - Extract Zip, Rar Archives (760)
  3. SHA256 Encrypt hash in JavaScript (664)
  4. Read Excel file data in PHP - PhpExcelReader (576)
  5. SHA1 Encrypt data in JavaScript (479)