Tutorial kali ini akan membahas penggunaan percabangan di vue.Disini kita akan menggunakan directive v-if,v-if ini sendiri biasa digunakan untuk menentukan apakah suatu element mau dirender atau tidak ,kalau istilah kerennya conditional rendering.
Pada tutorial ini akan dicontoh penggunaan beberapa bentuk :
- v-if
- v-if dengan v-else
- v-if ,v-else-if dan v-else
Contoh penggunaan v-if
v-if pada umumnya kita gunakan jika hanya memiliki satu kondisi yang harus benar.
<div v-if="isShowNama">{{nama}}</div>
Jika variabel isShowNama bernilai false maka element div yang berisi nama tersebut tidak akan dirender ke browser.
Contoh penggunaan v-if dengan v-else
Digunakan jika kita punya 2 kondisi jika tidak sesuai kondisi if,maka akan menjalankan else.
<div v-if="isShowEmail">{{email}}</div>
<div v-else>Tidak ada email</div>
Bisa dilihat pada contoh diatas jika isShowEmail bernilai true maka akan menampilkan nama,jika false maka akan menampilkan Tidak ada email.
Contoh penggunaan v-else-if
Digunakan jika kita memiliki lebih dari 2 kondisi.
<div v-if="nilai >= 75 ">Lulus</div>
<div v-else-if="nilai >= 60 && nilai<75 ">Cukuplah</div>
<div v-else>Kurang</div>
Contoh diatas kita punya 3 kondisi ,lulus,cukup dan kurang.Jika kita masukkan nilai 74 maka akan menampilkan Cukuplah.
Kurang lebih kode lengkap untuk semuanya seperti dibawah ini.
<template>
<div id="app">
<div v-if="isShowNama">{{nama}}</div>
<div v-if="isShowEmail">{{email}}</div>
<div v-else>Tidak ada email</div>
<div v-if="nilai >= 75 ">Lulus</div>
<div v-else-if="nilai >= 60 && nilai<75 ">Cukuplah</div>
<div v-else>Kurang</div>
</div>
</template>
<script>
export default {
name: "App",
data: () => {
return {
nama: "budi",
email: "budi@gmail.com",
isShowNama: false,
isShowEmail: true,
nilai: 64
};
}
};
</script>
Untuk lebih jelas bisa dilihat langsung demo untuk ketiga contoh diatas disini => Demo v-if.
Jika ada kurang dipahami bisa ditanyakan dibawah.
Top comments (0)