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
What attribute makes a radio button or checkbox input selected?
checked="checked" selected="selected" disabled="disabled"
<input type="checkbox" name="a_name" value="value" checked="checked" />
What CSS value scales the background image to the largest size contained within the element?
repeat-x contain linear-gradient
#id {
  background:url("path_to_image.png");
  background-size:contain;
  background-repeat:no-repeat;
}
What operator is used to determine the rest of the division of two numbers?
% * /
var rest8_7 = 8 % 7;
alert(rest8_7);
Indicate the PHP function that rounds a number up to the next highest integer.
floor() ceil() abs()
$nr = ceil(3.5);
echo $nr;        // 4
Conditional Directives v-if, v-else, v-show

Last accessed pages

  1. PHP Simple HTML DOM Parser (11532)
  2. JavaScript strip_tags and stripslashes (7259)
  3. Working with HTML attributes in PHP (12410)
  4. Convert XML to JSON in JavaScript (30790)
  5. Disable button and Enable it after specified time (15307)

Popular pages this month

  1. PHP Unzipper - Extract Zip, Rar Archives (99)
  2. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (86)
  3. SHA256 Encrypt hash in JavaScript (70)
  4. querySelector and querySelectorAll (50)
  5. SHA1 Encrypt data in JavaScript (45)