Mengenal Conditional Directive v-else pada Vue.Js

Pada tutorial ini kita akan belajar tentang Conditional (pengandaian) Directive v-else pada Vue.js, Conditional dikenal juga dengan istilah ‘jika-maka’. Conditional pada Javascript merupakan suatu perintah yang digunakan untuk memilih satu aksi dari beberapa kemungkinan dengan syarat tertentu.

Jika directive v-if menunjukan arti kondisi ‘jika-maka’, misalnya jika terdapat X maka akan dilakukan Y, Directive v-else memiliki arti berlawanan yaitu, ‘jika tidak-maka’, misalnya jika tidak terdapat X, maka akan dilakukan Y.

Kita akan membuat program dengan kasus seperti ini:

Jika nilai tampil = true, maka akan ada tulisan “Selamat Pagi“
Namun, jika nilai tampil bukan true (berarti false), maka akan ada tulisan “Selamat Pagi Juara“

Sekarang mari kita coba tuliskan script, di index.html:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<div id="app">
         <b v-if="tampil"> {{ pesan }}</b>
         <b v-else="tampil"> {{ pesan2 }}</b>
	</div>
	<script src="https://cdn.jsdelivr.net/npm/vue"></script>
	<script>
      new Vue({
      el: '#app',
         data: {
            tampil: false,
            pesan: 'Selamat Pagi',
            pesan2: 'Selamat Pagi Juara'
         }
      })
   </script>
</body>
</html>

Ketika kita menjalankan di browser karena script di atas, kita memberikan nilai tampil yaitu false, maka tulisan yang muncul adalah, Selamat Pagi Juara. Silahkan kalian coba untuk ubah-ubah kembali nilai dari ‘tampil’ nya, dari false bisa ke true, maupun sebaliknya. dan kalian bisa perhatikan apa perbedaannya.

Mengenal Conditional Directive v-else pada Vue.Js

Kategori