Percabangan Di Vue Js

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 :

1. v-if
2. v-if dengan v-else
3. 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.