v-if, v-else, v-else-if si v-show.
v-if adauga sau sterge elemente din DOM in functie de valoarea true sau false a expresiei date.
<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>
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>.
<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>
v-else este utilizata pentru a adauga continut doar atunci cand expresia adiacenta v-if e False.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.
<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>
v-else-if se foloseste cand avem mai mult de doua optiuni conditionale.v-else-if urmeaza imediat dupa un v-if sau un alt tag cu v-else-if.
<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>
v-show e similar cu v-if, se foloseste pentru a ascunde sau afisa un element HTML in functie de valoarea unei expresii.v-if adauga elementul in DOM daca expresia e True; dar un element cu v-show e adaugat si ramane mereu in DOM; v-show doar schimba valoarea proprietatii CSS display la acel element.v-show nu se foloseste cu v-else, v-else-if.v-show nu se adauga in element <template>.
<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.
<input type="number" name="points" min="5" max="80" />
#id {
filter:alpha(opacity=40); /* for IE */
opacity:0.4;
}var num = 12.84567; alert( num.toPrecision(3) ); // 12.8
$lang =[10=>"PHP", 20=>"JavaScript", "site"=>"coursesweb.net"); shuffle($lang); var_export($lang); // array (0=>"coursesweb.net", 1=>"PHP", 2=>"JavaScript")
She is the best in our class. - Ea este cea mai buna din clasa noastra.
Él es el mejor en nuestra clase. - El este cel mai bun din clasa noastra.