Vue.js contine un set de directive de baza pentru a afisa sau ascunde elemente HTML bazate pe conditii: v-if, v-else, v-else-if si v-show.

Directiva v-if

Directiva v-if adauga sau sterge elemente din DOM in functie de valoarea true sau false a expresiei date.

- Sintaxa:
<div v-if='can_add'>content</div>
Daca valoarea lui "can_add" e True acel element HTML e adaugat in DOM, daca valoarea e False elementul e sters.

- Exemple:
<div id='demo'>
 <div v-if='can_add'>Iertarea este vindecare.</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>

Grupuri conditionale v-if in <template>

Directiva v-if poate fi atasata la un singur element, dar se pot controla si mai multe elemente HTML cu un v-if. Pentru a face asta se adauga toate acele taguri HTML in elementul <template>.

- Exemplu:
<div id='demo'>
 <template v-if='can_add'>
 <h4>Iertarea este vindecare.</h4>
 <h4>Vindecarea este iertare.</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>

Directiva v-else

Directiva v-else este utilizata pentru a adauga continut doar atunci cand expresia adiacenta v-if e False.
La v-else nu se adauga valoare, dar se adauga intr-un tag HTML care sa urmeze imediat dupa un element cu v-if sau v-else-if.

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

Directiva v-else-if

Directiva v-else-if se foloseste cand avem mai mult de doua optiuni conditionale.
Un element v-else-if urmeaza imediat dupa un v-if sau un alt tag cu v-else-if.

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

Directiva v-show

Efectul directivei v-show e similar cu v-if, se foloseste pentru a ascunde sau afisa un element HTML in functie de valoarea unei expresii.
Diferenta dintre ele este:

- Exemplu:
<div id='demo'>
 <h4 v-show='can_show'>Observarea duce la vindecare.</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>

v-show prezinta un avantaj de performanta daca elementele sunt afisate si ascunse frecvent, in timp ce v-if are avantajul cand vine vorba de timpul de redare initial.

Un Test simplu in fiecare zi

HTML
CSS
JavaScript
PHP-MySQL
Engleza
Spaniola
Ce atribut poate fi utilizat pentru a adauga stiluri CSS direct in tag-ul HTML?
type style class
<div style="width: 80%; border: 3px solid #888888;">Continut</div>
Care din metodele proprietatii CSS transform distorsioneaza elementul HTML la un anumit unghi (inclusiv continutul lui)?
translate() scale() skew()
#un_id {
  transform: skew(20deg, 25deg);
  -ms-transform: skew(20deg, 25deg);   /* IE 9 */
  -webkit-transform: skew(20deg, 25deg);   /* Safari and Chrome */
}
Clic pe functia care poate converti un obiect Date in Sir.
indexOf() toString() getDate()
var rightnow = new Date();
alert( rightnow.toString() );
Care functie aplica o alta functie la elementele unui array?
array_merge() array_search() array_map()
$arr = arra("abc", "<p>xyz</p>", "<em>PHP</em>");
// aplica functia strip_tags() ca sa stearga tag-urile HTML din fiecare element din %arr
$arr = array_map("strip_tags", $arr);
}
Cum se spune "sambata" in limba engleza?
Sunday Saturday Monday
On Saturday I visit my grandparents.
- Sambata imi vizitez bunicii.
Cum se spune "sambata" in limba spaniola?
domingo lunes sábado
Sábado visito mis abuelos.
- Sambata imi vizitez bunicii.
Directive Conditionale v-if, v-else, v-show

Last accessed pages

  1. Cursuri si Tutoriale: Engleza, Spaniola, HTML, CSS, Php-Mysql, JavaScript, Ajax (70377)
  2. Conditional IF - Exercitii si teste engleza incepatori (7849)
  3. Viitor perfect (1802)
  4. Curs PHP MySQL, Tutoriale si Scripturi PHP (14526)
  5. Curs si Tutoriale Ajax (4023)

Popular pages this month

  1. Cursuri si Tutoriale: Engleza, Spaniola, HTML, CSS, Php-Mysql, JavaScript, Ajax (2696)
  2. Curs HTML gratuit Tutoriale HTML5 (1965)
  3. Curs si Tutoriale JavaScript (1903)
  4. Curs PHP MySQL, Tutoriale si Scripturi PHP (1849)
  5. Curs CSS Online Tutoriale CSS3 (1701)