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.
<p>Cursuri graruite: <mark>MarPlo.net</mark> , jocuri, anime.</p>
a:hover {
font-weight: bold;
color: #00da01;
}var num = 12.34567; num = num.toFixed(2); alert(num); // 12.35
$arr = file("a_file.txt", FILE_IGNORE_NEW_LINES | FILE_SKIP_EMPTY_LINES);
var_export($arr);What time is it? It is a quarter to 5. - Cat este ora? E 5 fara un sfert.
¿Qué hora es? Son las tres menos cuarto. - Cat este ora? E 3 fara un sfert.