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.
<table><tr> <th>Title 1</th> <th>Title 2</th> </tr></table>
.some_class {
line-height: 150%;
}document.getElementById("id_button").onclick = function(){
window.open("http://coursesweb.net/");
}$ar_dir = scandir("dir_name");
var_export($ar_dir);He will sleep there. - El va dormi acolo.
Él dormirá allí. - El va dormi acolo.