Catatan Belajar Vue : Conditional dan Lists
Biasanya yang paling sering dilakukan di view itu kalau gak mainin IF ya nge-loopingdata.Vue sudah memiliki directive tersendiri untuk hal itu, ada v-if untuk IF dan v-foruntuk loop. Untuk contoh v-if bisa salin html berikut.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Show & Lists</title>
<script src="https://vuejs.org/js/vue.min.js"></script>
</head>
<body>
<div id="app">
<button v-on:click="showHide">{{ string }}</button>
<div v-if="show">
Muncul
</div>
</div>
</body>
<script>
new Vue({
el: '#app',
data: {
show: false
},
methods: {
showHide() {
this.show = !this.show
}
},
computed: {
string(){
if(this.show == true)
{
return "Hide"
}else{
return "Show"
}
}
}
})
</script>
</html>
Hasilnya seperti ini :
Directive v-if pada div membaca properti show jika true maka div tersebut dimunculkan, dan jika false akan dihilangkan. Sebenarnya untuk menghilangkan dan memunculkan ada directive lainnya yaitu v-show. Bedanya v-if dan v-show itu saat penerapan DOM di browser, v-if benar-benar menghilangkan dari struktur html sedangkan v-show hanya menyembunyikan. Agar lebih jelas bisa salin html berikut dan lihat hasilnya di console developer tools browser.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Show & Lists</title>
<script src="https://vuejs.org/js/vue.min.js"></script>
</head>
<body>
<div id="app">
<button v-on:click="showHide">{{ string }}</button>
<div v-if="show">
Muncul
</div>
<div v-show="show">
Ini v-show
</div>
</div>
</body>
<script>
new Vue({
el: '#app',
data: {
show: false
},
methods: {
showHide() {
this.show = !this.show
}
},
computed: {
string(){
if(this.show == true)
{
return "Hide"
}else{
return "Show"
}
}
}
})
</script>
</html>
Lihat di console, yang menggunakan v-show saat tidak dimunculkan ditambahkan style="display:none" sedangkan yang v-if sama sekali tidak ada di browser. Begitupun saat muncul, yang v-if mendadak muncul dan style="display:none" si v-show juga hilang.
Untuk v-if masih ada v-else-ifdan v-else, untuk lebih detil bisa dilihat di situs ofisial vue.
Sekarang Loop atau pengulangan. Langsung ajalah, salin html berikut.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Show & Lists</title>
<script src="https://vuejs.org/js/vue.min.js"></script>
</head>
<body>
<div id="app">
<button v-on:click="showHide">{{ string }}</button>
<div v-if="show">
<p>Daftar Buku</p>
<ul>
<li v-for="book in books">{{ book.title }} ( {{ book.price }} )</li>
</ul>
</div>
</div>
</body>
<script>
new Vue({
el: '#app',
data: {
show: false,
books : [
{title: "Cara beternak Lele", price: 45000},
{title: "Kaya tanpa pesugihan", price: 45000},
{title: "Kiat-kiat MLM", price: 45000}
]
},
methods: {
showHide() {
this.show = !this.show
}
},
computed: {
string(){
if(this.show == true)
{
return "Hide"
}else{
return "Show"
}
}
}
})
</script>
</html>
Pada HTML list saya tambahkan v-for dengan struktur v-for=alias in properti, dan selanjutnya tinggal panggil aja dengan cara alias.key pada sumber data. Hasilnya akan seperti ini.
Referensi :
- https://vuejs.org/v2/guide/conditional.html
- https://www.youtube.com/watch?v=sI_vgLd_CyU&list=PL55RiY5tL51p-YU-Uw90qQH419BM4Iz07&index=5