VueJS - renderowanie
W tym rozdziale nauczymy się renderowania warunkowego i renderowania listy. W renderowaniu warunkowym omówimy użycie if, if-else, if-else-if, show itp. W renderowaniu list omówimy użycie pętli for.
Renderowanie warunkowe
Zacznijmy i najpierw popracujmy nad przykładem, aby wyjaśnić szczegóły renderowania warunkowego. W przypadku renderowania warunkowego chcemy wyświetlać tylko wtedy, gdy warunek jest spełniony, a sprawdzenie warunkowe odbywa się za pomocą if, if-else, if-else-if, show itp.
v-if
Example
<html>
<head>
<title>VueJs Instance</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<div id = "databinding">
<button v-on:click = "showdata" v-bind:style = "styleobj">Click Me</button>
<span style = "font-size:25px;"><b>{{show}}</b></span>
<h1 v-if = "show">This is h1 tag</h1>
<h2>This is h2 tag</h2>
</div>
<script type = "text/javascript">
var vm = new Vue({
el: '#databinding',
data: {
show: true,
styleobj: {
backgroundColor: '#2196F3!important',
cursor: 'pointer',
padding: '8px 16px',
verticalAlign: 'middle',
}
},
methods : {
showdata : function() {
this.show = !this.show;
}
},
});
</script>
</body>
</html>
Output
W powyższym przykładzie utworzyliśmy przycisk i dwa tagi h1 z komunikatem.
Zmienna o nazwie show jest zadeklarowana i zainicjowana do wartości true. Jest wyświetlany w pobliżu przycisku. Po kliknięciu przycisku wywołujemy metodęshowdata, która przełącza wartość zmiennej show. Oznacza to, że po kliknięciu przycisku wartość zmiennej show zmieni się z true na false iz false na true.
Przypisaliśmy if do tagu h1, jak pokazano w poniższym fragmencie kodu.
<button v-on:click = "showdata" v-bind:style = "styleobj">Click Me</button>
<h1 v-if = "show">This is h1 tag</h1>
Teraz sprawdzi wartość zmiennej show i jeśli to prawda, zostanie wyświetlony znacznik h1. Kliknij przycisk i zobacz w przeglądarce, ponieważ wartość zmiennej show zmienia się na false, znacznik h1 nie jest wyświetlany w przeglądarce. Jest wyświetlany tylko wtedy, gdy zmienna show ma wartość true.
Poniżej przedstawiono wyświetlanie w przeglądarce.
Jeśli sprawdzimy w przeglądarce, otrzymamy to, gdy show jest fałszywe.
Znacznik h1 jest usuwany z DOM, gdy zmienna show ma wartość false.
Oto, co widzimy, gdy zmienna jest prawdziwa. Znacznik h1 jest dodawany z powrotem do DOM, gdy zmienna show ma wartość true.
v-else
W poniższym przykładzie dodaliśmy v-else do drugiego znacznika h1.
Example
<html>
<head>
<title>VueJs Instance</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<div id = "databinding">
<button v-on:click = "showdata" v-bind:style = "styleobj">Click Me</button>
<span style = "font-size:25px;"><b>{{show}}</b></span>
<h1 v-if = "show">This is h1 tag</h1>
<h2 v-else>This is h2 tag</h2>
</div>
<script type = "text/javascript">
var vm = new Vue({
el: '#databinding',
data: {
show: true,
styleobj: {
backgroundColor: '#2196F3!important',
cursor: 'pointer',
padding: '8px 16px',
verticalAlign: 'middle',
}
},
methods : {
showdata : function() {
this.show = !this.show;
}
},
});
</script>
</body>
</html>
v-else jest dodawane przy użyciu następującego fragmentu kodu.
<h1 v-if = "show">This is h1 tag</h1>
<h2 v-else>This is h2 tag</h2>
Teraz, jeśli przedstawienie jest prawdą “This is h1 tag” zostanie wyświetlony, a jeśli false “This is h2 tag”zostanie wyświetlone. To właśnie otrzymamy w przeglądarce.
Powyższy ekran dotyczy sytuacji, gdy zmienna show ma wartość true. Ponieważ dodaliśmy v-else, druga instrukcja nie jest obecna. Teraz, gdy klikniemy przycisk, zmienna show stanie się fałszywa, a druga instrukcja zostanie wyświetlona, jak pokazano na poniższym zrzucie ekranu.
v-show
v-show zachowuje się tak samo jak v-if. Pokazuje również i ukrywa elementy na podstawie przypisanego warunku. Różnica między v-if i v-show polega na tym, że v-if usuwa element HTML z DOM, jeśli warunek jest fałszywy, i dodaje go z powrotem, jeśli warunek jest prawdziwy. Natomiast v-show ukrywa element, jeśli warunek jest fałszywy z display: none. Pokazuje element z powrotem, jeśli warunek jest prawdziwy. Zatem element jest zawsze obecny w domenie.
Example
<html>
<head>
<title>VueJs Instance</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<div id = "databinding">
<button v-on:click = "showdata" v-bind:style = "styleobj">Click Me</button>
<span style = "font-size:25px;"><b>{{show}}</b></span>
<h1 v-if = "show">This is h1 tag</h1>
<h2 v-else>This is h2 tag</h2>
<div v-show = "show">
<b>V-Show:</b>
<img src = "images/img.jpg" width = "100" height = "100" />
</div>
</div>
<script type = "text/javascript">
var vm = new Vue({
el: '#databinding',
data: {
show: true,
styleobj: {
backgroundColor: '#2196F3!important',
cursor: 'pointer',
padding: '8px 16px',
verticalAlign: 'middle',
}
},
methods : {
showdata : function() {
this.show = !this.show;
}
},
});
</script>
</body>
</html>
v-show jest przypisywane do elementu HTML przy użyciu następującego fragmentu kodu.
<div v-show = "show"><b>V-Show:</b><img src = "images/img.jpg" width = "100" height = "100" /></div>
Użyliśmy tej samej zmiennej show i opierając się na tym, że jest ona prawda / fałsz, obraz jest wyświetlany w przeglądarce.
Teraz, ponieważ zmienna show ma wartość true, obraz jest taki, jak pokazano na powyższym zrzucie ekranu. Kliknijmy przycisk i zobaczmy wyświetlacz.
Zmienna show jest fałszywa, dlatego obraz jest ukryty. Jeśli sprawdzimy i zobaczymy element, div wraz z obrazem nadal jest częścią DOM z właściwością style display: none, jak widać na powyższym zrzucie ekranu.
Renderowanie listy
v-for
Omówmy teraz renderowanie list za pomocą dyrektywy v-for.
Example
<html>
<head>
<title>VueJs Instance</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<div id = "databinding">
<input type = "text" v-on:keyup.enter = "showinputvalue"
v-bind:style = "styleobj" placeholder = "Enter Fruits Names"/>
<h1 v-if = "items.length>0">Display Fruits Name</h1>
<ul>
<li v-for = "a in items">{{a}}</li>
</ul>
</div>
<script type = "text/javascript">
var vm = new Vue({
el: '#databinding',
data: {
items:[],
styleobj: {
width: "30%",
padding: "12px 20px",
margin: "8px 0",
boxSizing: "border-box"
}
},
methods : {
showinputvalue : function(event) {
this.items.push(event.target.value);
}
},
});
</script>
</body>
</html>
Zmienna o nazwie items jest zadeklarowana jako tablica. W metodach istnieje metoda o nazwieshowinputvalue, które jest przypisane do pola wprowadzania, które przyjmuje nazwy owoców. W metodzie owoce wpisane w pole tekstowe są dodawane do tablicy za pomocą następującego fragmentu kodu.
showinputvalue : function(event) {
this.items.push(event.target.value);
}
Użyliśmy v-for do wyświetlenia owoców wpisanych jak w poniższym fragmencie kodu. V-for pomaga iterować po wartościach obecnych w tablicy.
<ul>
<li v-for = "a in items">{{a}}</li>
</ul>
Aby iterować po tablicy za pomocą pętli for, musimy użyć v-for = ”a in items”, gdzie a przechowuje wartości w tablicy i będzie wyświetlane, dopóki wszystkie elementy nie zostaną wykonane.
Output
Poniżej przedstawiono dane wyjściowe w przeglądarce.
To właśnie pokazuje przeglądarka podczas sprawdzania elementów. W DOM nie widzimy żadnej dyrektywy v-for dla elementu li. Wyświetla DOM bez żadnych dyrektyw VueJS.
Jeśli chcemy wyświetlić indeks tablicy, zrobimy to za pomocą następującego kodu.
<html>
<head>
<title>VueJs Instance</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<div id = "databinding">
<input type = "text" v-on:keyup.enter = "showinputvalue"
v-bind:style = "styleobj" placeholder = "Enter Fruits Names"/>
<h1 v-if = "items.length>0">Display Fruits Name</h1>
<ul>
<li v-for = "(a, index) in items">{{index}}--{{a}}</li>
</ul>
</div>
<script type = "text/javascript">
var vm = new Vue({
el: '#databinding',
data: {
items:[],
styleobj: {
width: "30%",
padding: "12px 20px",
margin: "8px 0",
boxSizing: "border-box"
}
},
methods : {
showinputvalue : function(event) {
this.items.push(event.target.value);
}
},
});
</script>
</body>
</html>
Aby uzyskać indeks, dodaliśmy jeszcze jedną zmienną w nawiasie, jak pokazano w poniższym fragmencie kodu.
<li v-for = "(a, index) in items">{{index}}--{{a}}</li>
W (a, indeks), a jest wartością i indexjest kluczem. Wyświetlacz przeglądarki będzie teraz wyglądał tak, jak pokazano na poniższym zrzucie ekranu. W ten sposób za pomocą indeksu można wyświetlić dowolne określone wartości.