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: "[e-mail]",
      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.