Curs Vuejs


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
Care atribut face ca optiunea din <select> sa fie selectata?
checked="checked" selected="selected" disabled="disabled"
<select name="a_name">
 <option value="val1">Optiune 1</option>
 <option value="val2" selected="selected">Optiune 2</option>
</select>
Care din aceste valori CSS creaza culoare gradient pentru fundal?
contain repeat-x linear-gradient
#id {
  background: linear-gradient(top left, #1f1, #fff, #11f);
}
Care cod creaza un array in JavaScript?
[] {} new Object()
var arr = [1, "CoursesWeb.net", "MarPlo.net"];
alert(arr[2]);
Indicati functia PHP folosita pentru redirect la alta pagina.
function() header() switch()
header("Location: http://coursesweb.net/");
exit;
Indicati articolul corect la cuvantul "garden" in propozitia: "... garden is a place with flowers".
An The A
The garden is a place with flowers.
- Gradina este un loc cu flori.
Indicati articolul corect pentru cuvantul: "jardín" (gradina)
la los el
El jardín es un lugar de flores.
- Gradina e un loc cu flori.
Directive Conditionale v-if, v-else, v-show

Last accessed pages

  1. Gramatica limbii spaniole. Indrumator si prezentare generala (70587)
  2. Autobiografia unui Yoghin, Paramhansa Yogananda (2293)
  3. Prezentul simplu - Exercitii si teste incepatori (70640)
  4. Operatori in JavaScript (8338)
  5. Español popular - Jerga de mexico (E-Ñ) (564)

Popular pages this month

  1. Cursuri si Tutoriale: Engleza, Spaniola, HTML, CSS, Php-Mysql, JavaScript, Ajax (52)
  2. Gramatica limbii engleze - Prezentare Generala (21)
  3. Gramatica limbii spaniole. Indrumator si prezentare generala (20)
  4. Curs de Miracole (18)
  5. Cursuri limba engleza gratuite si lectii online (18)