Hallo Coder 😃 , Pada kali ini kita akan membahas tentang Menggunakan if di vue js. coditional atau pengandaian, yang dikenal dengan istilah jika – maka

Seperti ini Jika X melakukan A maka akan dapat B, Jika C melakukan D maka akan dapat E, dan seterusnya.

Pengandaian dalam javascript merupakan suatu perintah yang digunakan untuk memilih satu aksi dari beberapa kemungkinan dengan syarat tertentu seperti diatas.

Pengandaian ini sering digunakan dalam sebuah pemograman, seperti di PHP,  dan lainnya, seperti bahasa pemograman lainya VueJS juga bisa menggunakan if dan else.

Menggunakan if di vue js

ada beberapa directive bertipe pengandaian yang dibuat untuk memudahkan depeloper dalam melakukan pengembangan dalam programnya. menggunakan if di vue js contoh sederhana di bawah ini.

Code diatas pada bagian app.js ada dua buah variable di dalam data, variable pertama tampil sebagai acuan untuk if.

Dan variable kedua pesan sebagai data yang akan ditampilknan. <b v-if=”tampil”> {{ pesan }} </b>   menggunakan if (v-if) untuk pengandaiannya.

Coba rubah tampil nya jadi false, maka pesan tidak akan muncul begitu pula sebaliknya jika true pesan akan muncul terus.

Bagaimana jika kita ingin memberi nilai pada sebuah if, coba lihat code dibawah ini.

pada code di atas kita memberi sebuah nilai pada ifnya yaitu ada, coba rubah menjadi tidak maka tidak akan ada pesan yang keluar. coba rubah codenya seperti dibawah ini.

V-else

Didalam code diatas kita menggunakan if dan else, tidak enak menceritakan if tanpa else wkwkwk, codenya seperti berikut ini.

kamu hanya perlu menganti pada directive v-if menjadi v-else. dan hasil yang akan keluar dari code diatas adalah pesan yang kedua mengapa ?

karena variable tampil bernilai false. coba rubah menjadi true maka yang akan keluar adalah pesan2.

begitu juga sebaliknya jika varible tampil2 false maka yang akan keluar adalah data yang ada di variable pesan.

Menggunakan if di vue Js sama seperti bahasa yang lain hanya beda dalam codingannya strukturnya sama saja, anda bisa kreasikan code diatas seperti yang anda mau. Jangan lupa juga coba tutorial Menggunakan v-once dan v-on di vue js. Salam Coder.

shares