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> <td>Cell-1</td><td>Cell-2</td> </tr></table>
h3 {
background-image: url("image.jpg");
}var arr = [1, "ab", "CoursesWeb.net"];
for(var i=0; i< arr.length; i++) { alert(arr[i]); };$arr =["k1"=>"v1", "k2"=>"v2", "k3"=>"v3");
foreach($arr AS $k => $v) { echo "<br/>". $k ." - ". $v; }He is so kind and meek. - El este atat de amabil si bland.
Tu padre tiene un carácter muy manso. - Tatal tau are un caracter foarte bland.