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 a new line into a paragraph?
<b> <br> <p>
First line ...<br>
Other line...
Which CSS property can be used to add space between letters?
text-size word-spacing letter-spacing
#id {
  letter-spacing: 2px;
}
What JavaScript function can be used to get access to HTML element with a specified ID?
getElementById() getElementsByTagName() createElement()
var elm = document.getElementById("theID");
var content = elm.innerHTML;
alert(content);
Click on the "echo" correct instruction.
echo "CoursesWeb.net" echo "CoursesWeb.net"; echo ""CoursesWeb.net";
echo "Address URL: http://CoursesWeb.net";
Conditional Directives v-if, v-else, v-show

Last accessed pages

  1. Working with HTML attributes in PHP (13579)
  2. Get Mime Type of file or string content in PHP (6148)
  3. Disable button and Enable it after specified time (17416)
  4. Redirects (4874)
  5. Get Duration of Audio /Video file before Upload (15355)

Popular pages this month

  1. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (270)
  2. Read Excel file data in PHP - PhpExcelReader (63)
  3. The Mastery of Love (59)
  4. PHP Unzipper - Extract Zip, Rar Archives (58)
  5. PHP-MySQL free course, online tutorials PHP MySQL code (42)