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 is used to add lists into <ul> and <ol> elements?
<dt> <dd> <li>
<ul>
 <li>http://coursesweb.net/html/</li>
 <li>http://coursesweb.net/css/</li>
</ul>
Which value of the "display" property creates a block box for the content and ads a bullet marker?
block list-item inline-block
.some_class {
  display: list-item;
}
Which instruction converts a JavaScript object into a JSON string.
JSON.parse() JSON.stringify eval()
var obj = {
 "courses": ["php", "javascript", "ajax"]
};
var jsonstr = JSON.stringify(obj);
alert(jsonstr);    // {"courses":["php","javascript","ajax"]}
Indicate the PHP class used to work with HTML and XML content in PHP.
stdClass PDO DOMDocument
$strhtml = '<body><div id="dv1">CoursesWeb.net</div></body>';
$dochtml = new DOMDocument();
$dochtml->loadHTML($strhtml);
$elm = $dochtml->getElementById("dv1");
echo $elm->nodeValue;    // CoursesWeb.net
Conditional Directives v-if, v-else, v-show

Last accessed pages

  1. Rotate HTML objects, Div, Span, images with jQuery (7200)
  2. Get and Modify content of an Iframe (26062)
  3. Convert BBCode to HTML and HTML to BBCode with JavaScript (7248)
  4. Convert XML to JSON in JavaScript (25717)
  5. Get and change IFrame content through a JavaScript script created in another IFrame (13292)

Popular pages this month

  1. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (715)
  2. SHA256 Encrypt hash in JavaScript (568)
  3. PHP Unzipper - Extract Zip, Rar Archives (551)
  4. Read Excel file data in PHP - PhpExcelReader (541)
  5. Create simple Website with PHP (456)