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 indica faptul ca un camp de formular trebuie completat?
required="required" autofocus="autofocus" placeholder="text"
<input type="text" name="name1" required="required" />
Ce metoda CSS misoreaza sau mareste dimensiunile unui element (inclusiv continutul)?
translate() scale() skew()
#some_id:hover {
  transform: scale(2, 1.5);
  -ms-transform: scale(2, 1.5);    /* IE 9 */
  -moz-transform: scale(2, 1.5);   /* Firefox */
}
Click pe metoda obiectului Date care returneaza ziua din luna.
setDate() getMonth() getDate()
var rightnow = new Date();
var day = rightnow.getDate();
alert(day);
Ce functie este folosita pentru a incarca un fisier pe server?
is_file() move_uploaded_file() fopen()
if(move_uploaded_file($_FILES["field_name"]["tmp_name"], "dir/file_name")) {
  echo "Fisierul a fost incarcat";
}
Cum se spune in engleza expresia: "Ploua cu galeata"?
rain cats and dogs rain buckets quiet rain
In Bucharest it`s raining cats and dogs.
- In Bucuresti ploua cu galeata.
Cum se spune in spaniola expresia: "Ploua cu galeata"?
llover cubo llover a cántaros lluvia tranquila
En Madrid está lloviendo a cántaros.
- In Madrid ploua cu galeata.
Directive Conditionale v-if, v-else, v-show

Last accessed pages

  1. Curs si Tutoriale Ajax (35401)
  2. Numere cardinale 1-10 (2955)
  3. Curs CSS Online Tutoriale CSS3 (40576)
  4. Scriere scripturi PHP elementare (3613)
  5. Curs PHP MySQL, Tutoriale si Scripturi PHP (48499)

Popular pages this month

  1. Cursuri si Tutoriale: Engleza, Spaniola, HTML, CSS, Php-Mysql, JavaScript, Ajax (1097)
  2. Curs HTML gratuit Tutoriale HTML5 (788)
  3. Curs PHP MySQL, Tutoriale si Scripturi PHP (729)
  4. Curs si Tutoriale Ajax (724)
  5. Curs si Tutoriale JavaScript (715)